vue.js - VueJS：在计算道具和数据道具中使用时 i18n 不更新

Question

我安装了 vue-i18n ( http://kazupon.github.io/vue-i18n/en/ ) 库以在 VueJS 项目中进行本地化。

所以我现在正在尝试使用它，当在语言之间切换时，要更新数据。所以这是我尝试使用它的方式：

示例 1：

<template>
    <h1>{{ $t('message.hello') }}</h1>
</template>

示例 2：

<template>
    <h1>{{ msg }}</h1>
</template>

组件中的代码如下所示：

<script>
export default {      
  data() {
    return {
      msg: this.localeTest //which is showing undefined all the time
      //here I also tried the "msg: this.$t('message.hello')" and
      //in this case the value of the inital language is displayed
      //but then it's never updated while switching languages
    };
  },
  computed: {
    localeTest() {
      return this.$t('message.hello');
    }
  },
  methods: {
    changeLocale() {
      if (this.$i18n.locale === 'ja-JP') {
        this.$i18n.locale = 'en-US';
      } else {
        this.$i18n.locale = 'ja-JP';
      }
    }
  }
};
</script>

示例 1 按预期工作，但我对示例 2 感兴趣。为此，我尝试了两种方案（在代码中的注释中进行了描述），但它们都没有按预期工作。我更感兴趣的是让它在“计算属性”场景中工作。