[Vuejs]-Vue I18n Doesn't Rerender when Message Change

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