i18n localization for Vue 3 composition API not updated

Question

I'm trying to change the locale for Vue-i18n by clicking a button. But when I click the button, nothing happens. There are no errors either. how to solve this problem?

<button v-on:click.prevent="setLocale('id')">Ind</button>
<button v-on:click.prevent="setLocale('en')">Eng</button>

import i18n from "../i18n";
const setLocale = (lang) => {
  i18n.global.locale = lang;
};

Answer 1

There may be other issues, but there is at least one bug in the code. i18n.global.locale is a ref and should be used as follows:

const setLocale = (lang) => {
  i18n.global.locale.value = lang;
};

It cannot be done in a reactive manner.