i18n.global.locale is not working

Module versions (please complete the following information):

• vue: 3.2.11 (script setup)
• vue-i18n: 8.17.0

Reproduce 1 . Clear project with vue3 2. vue add i18n

After that you have vue.config.js (default changes)

const path = require('path');
const PrerenderSPAPlugin = require('prerender-spa-plugin');

module.exports = {
  lintOnSave: true,

  configureWebpack: {
    plugins: [
      new PrerenderSPAPlugin({
        staticDir: path.join(__dirname, 'dist'),
        routes: ['/ru', '/en'],
      }),
    ],
  },

  pluginOptions: {
    i18n: {
      locale: 'en',
      fallbackLocale: 'en',
      localeDir: 'locales',
      enableLegacy: false,
      runtimeOnly: false,
      compositionOnly: false,
      fullInstall: true,
    },
  },
};

i18n.js (without loadLocaleMessages)

import { createI18n } from 'vue-i18n';

export default createI18n({
  legacy: false,
  locale: process.env.VUE_APP_I18N_LOCALE || 'en',
  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
  messages: {},
});

main.js (default changes)

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import i18n from './i18n';

createApp(App)
  .use(i18n)
  .use(store)
  .use(router)
  .mount('#app');

router/index.js (change language) BUG HERE

import { createRouter, createWebHistory } from 'vue-router';
import Landing from '../views/Landing.vue';
import i18n from '../i18n';

const languages = ['en', 'ru'];

const defaultRoute = { name: 'Landing', params: { lang: languages[0] } };

const routes = [
  {
    path: '/',
    redirect: defaultRoute,
  },
  {
    path: '/:lang',
    name: 'Landing',
    component: Landing,
    beforeEnter: (to, from, next) => {
      if (languages.includes(to.params.lang)) {
        // i18n.global.locale = to.params.lang; // todo didn't work <------------------
        // eslint-disable-next-line no-underscore-dangle
        i18n.global.locale._setter(to.params.lang); // temporarry fix
        next();
        return;
      }
      next(defaultRoute);
    },
  },
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

export default router;

Component with error

<script setup>
import { computed } from 'vue';
import { useI18n } from 'vue-i18n';
import IconInfoSmall from '../icons/IconInfoSmall.vue';

const { t } = useI18n({
  inheritLocale: true,
  useScope: 'local',
});
// ...
</script>
<i18n>
{
  "en": {
    "title": "Download application",
    "download": "Download",
    "info": "Version {version}. Release {releaseDate}"
  },
  "ru": {
    "title": "Скачать приложение",
    "download": "Скачать",
    "info": "Версия {version}. Дата выхода {releaseDate}"
  }
}
</i18n>

Expected behavior When I call i18n.global.locale = to.params.lang setter should be work.

Screenshots

[AndreiSoroka]

Hi! @kazupon today I upgrade to “vue-i18n”: “^9.2.0-beta.17” but have the same problem

[kazupon]

You can check the example with router at here: https://github.com/intlify/vue-i18n-next/tree/master/examples/lazy-loading

By the way, this github issues is for vue-i18n@v8.x From now on, if you have an issue, please open the issue at the below URL: https://github.com/intlify/vue-i18n-next/issues

If you have something you are not sure about, please open it in the GitHub discussions https://github.com/intlify/vue-i18n-next/discussions

Thanks!