Vue-i18n doesn't work properly in the data method?

Question

Multilingual folder i18n contents are as follows:

src lang cn.js us.js index.js

The contents of the index.js file are as follows:

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;

mina.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 }
})

I want to say the write to template tags and JS code, as follows:

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

and

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')}
            ],                 
        }
    },
}

When I switch over multilingual methods:

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();
    },
},

In template, multi language syntax behaves as expected, but JS grammar is not. It pays attention to display a certain language，Where is the problem? Thanks!

Answer 1

showLangSelector is spelled wrong. Also reloading the page will destruct the whole vue component and reconstruct one from scratch, so the this.foo = bar settings above reload won't work, because in the reloaded page, they never happened, you only have a fresh new vue component.