The documentation here https://vue-i18n.intlify.dev/guide/essentials/started.html tells that the locale can be specified like this:

const i18n = createI18n({
  locale: 'ja',
  fallbackLocale: 'en',
  messages: {
    en: {
      message: {
        hello: 'hello world'
      }
    },
    ja: {
      message: {
        hello: 'こんにちは、世界'
      }
    }
  }
})

And then used like this:

const app = createApp(Vue)
app.use(i18n)
app.mount('#app')

I would like to be able to change the locale dynamically. I have a store that stores the current locale:

const appStore = useAppStore()
const i18n = createI18n({
  locale: appStore.locale,
  // more code here...
}
app.use(i18n)

But this is not reactive. If the locale changes in the store, then the i18n object is not updated, and the locale is not really changed.

const appStore = useAppStore()
appStore.locale='en' // this has almost no effect, does not re-render the components

The i18n object itself does not have a method to change the locale, so even if I could subscribe to locale changes, I don’t know how to reconfigure an already existing application to use a different locale. Otherwise, it would be fine to listen for changes, and programatically force a re-render when the locale changes.

But how?