vue.js - データメソッドで Vue-i18n が正しく動作しませんか?

Question

多言語フォルダーi18nの内容は次のとおりです。

src lang cn.js us.js index.js

ファイルの内容は次のindex.jsとおりです。

import VueI18n from 'vue-i18n'
import Vue from 'vue'

Vue.use(VueI18n)

const i18n = new VueI18n({
    locale: 'cn',
    messages:{
        'cn': require('./lang/cn'),
        'us': require('./lang/us')
    }
})

export default i18n;

min.js

import Vue from 'vue'
import App from './App'
import router from './router'
import i18n from './i18n' //import mutil-lang

Vue.config.productionTip = false

var VueCookie = require('vue-cookie');
Vue.use(VueCookie);

new Vue({
  el: '#app',
  router,
  template: '<App />',
  i18n, //import mutil-lang
  components: { App }
})

テンプレートタグと JS コードへの書き込みについては、次のように言いたいと思います。

<template>    
    <div class="wrap">
        {{ $t('message.the_world') }}
    </div>
</template>

と

export default {
    name:'dkc-exchange-detail' ,
    data(){
        return {
            showExchangeTypes: false,
            exchangetItems: [
                //this.$t('message.the_world') Want to get the character of the corresponding language
                {id: 1, text: this.$t('message.the_world')},//
                {id: 2, text: this.$t('message.the_world_2')}
            ],                 
        }
    },
}

多言語メソッドを切り替えると:

methods:{        
    choiceLang: function(lang){
        if(lang === this.currentLang)
            return;
        this.currentLang = lang;
        this.showLangSelecor = false;
        this.$cookie.set('lang', this.currentLang.lang, { expires: 7 });        
        window.location.reload();
    },
},

テンプレートでは、多言語構文は期待どおりに動作しますが、JS 文法はそうではありません。特定の言語を表示することに注意を払う，どこに問題があるのか​​? ありがとう！