I have a problem with nuxt js with i18n where when I open a page, change the language, and click back to the previous page, the language will remain the same as the previous language.

Example:

1. from home ('/en')
2. open about ('/en/about')
3. Change the local language using setLocale and the route also changes, for example to ('/id/about')
4. When I click back to the previous page, it will open '/en/about' again, if I click it again it will return to '/en'

What is desired to happen is that the language prefix will remain 'id' because the language has been changed.

Here is my nuxt.config.ts code related to i18n

modules: ['@nuxtjs/i18n'],
  i18n: {
    lazy: true,
    strategy: "prefix",
    locales: [
      {
        code: 'en',
        iso: "en",
        name: "English",
        file: 'en.json',
      },
      {
        code: 'id',
        iso: "id",
        name: "Indonesia",
        file: 'id.json',
      }
    ],
    defaultLocale: 'en',
    detectBrowserLanguage: {
      useCookie: true,
    },
    vueI18n: './i18n.config.ts'
  }

And here is the i18n.config.ts

export default defineI18nConfig(() => ({
  legacy: false,
}))

What I use to change the language in the client is like this

const { setLocale } = useI18n();

const handleLanguageSwitch = async (langCode) => {
    await setLocale(langCode);
};

For the language files stored in /i18n/locales or the folder structure:

-| nuxt-project/
---| i18n/
-----| locales/
-------| en.json # locale messages for English
-------| id.json # locale messages for Indonesia
---| nuxt.config.ts
---| i18n.config.ts

I've tried other methods such as setting locale using locale.value = langCode but it still doesn't work, sometimes the translation doesn't change immediately, required page refresh