Vue I18n Doesn't Rerender when Message Change - vue.js

Question

Hi take a look this code, if I set the message asynchronously whenever new data resolved, it doesn't re render the translation.
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>
<div id="app">
<p>{{ $t("home") }}</p>
</div>
const locale = {
id: {
home: 'Beranda'
},
en: {
home: 'Home'
}
}
const i18n = new VueI18n({
locale: 'id'
})
new Vue({
el: '#app',
i18n,
created () {
setTimeout(() => {
this.$i18n.setLocaleMessage(locale)
}, 100)
}
})
Updated
My current workaround is define a method that return Promise and the variable that will hold the text. When the promise is resolved, then I set the translation.
const locale = {
id: {
home: 'Beranda'
},
en: {
home: 'Home'
}
}
const i18n = new VueI18n({
locale: 'id'
})
new Vue({
el: '#app',
i18n,
data: {
text: null
},
methods: {
getData () {
return new Promise(resolve => {
setTimeout(() => {
this.$i18n.setLocaleMessage('id', locale.id)
this.$i18n.setLocaleMessage('en', locale.en)
resolve()
}, 1000)
})
}
},
created () {
this.getData().then(() => {
this.text = this.$t('home')
})
}
})
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>
<div id="app">
<p>{{ text }}</p>
</div>

Answer 1

Looking at the docs, you need to set the keypath.
Define:
const messages = { // keypath
id: {
home: 'Beranda'
},
en: {
home: 'Home'
}
}
And use the messages to set the default language:
const i18n = new VueI18n({
locale: 'id', // default locale
messages // keypath is set
})
If you use keypath name other than messages:
const translations = { // different keypath constant
id: {
home: 'Beranda'
},
en: {
home: 'Home'
}
}
const i18n = new VueI18n({
locale: 'id',
messages: translations // messages now use translations keypath
})
new Vue({
el: '#app',
i18n,
/* created () { // you don't need to set locale here
setTimeout(() => {
this.$i18n.setLocaleMessage(locale)
}, 100)
} */
})
Here's a working demo
Update
As per your comment, to set locale asynchronously - you can use like this:
const i18n = new VueI18n({
messages
})
new Vue({
el: '#app',
i18n,
created () {
setTimeout(() => {
this.$i18n.locale = 'id'
}, 100)
}
})
demo