Is there a way to get reactivity on the translations in script on language change?

[rbourtoutian]

I have a language selector :

<select @change="saveLocale($root.$i18n.locale)" v-model="$root.$i18n.locale">

and the saveLocale function :

saveLocale (locale) {
localStorage.setItem('locale', locale)
},

Upon changing the language, all $t(..) are changed in the template section, which is perfect. But I have an array of headers in the script section which is translated:

headers: [
{ text: this.$t('general.name', this.locale), value: 'name' },
{ text: this.$t('general.status'), value: 'approval_status'},
{ text: this.$t('general.created_dttm'), value: 'created_dttm'},
],

headers only gets translated on boot.load of the page, but when I change the language the headers translated texts don't translate.Only after page refresh the headers texts get translated as well.

Is there a way that I am missing to make the translated texts in the script part of vue component reactive as well???

[dzyubadmytro]

this one helped to me
#149 (comment)

[rbourtoutian]

this one helped to me
#149 (comment)

Thanks for help, but I don't really figure out how to do this...There dont seem to be a clear example. Why is it this.$i18n.t and not this.$t as we usually do?

[rbourtoutian]

PROBLEM SOLVED: the whole issue is not related to vue-i18n, it is related to the reactivity of the headers array I wanted to be re-translated upon language change.

To do so, you'll need to NOT send the array as an array in the "data()" portion, but return the headers array as a function in the 'methods()' portion.