useLocaleHead doesn't change or its not reactive from 8.0.1 version.

[jesspinklet]

Environment

---

• Operating System: Linux
• Node Version: v18.18.0
• Nuxt Version: 3.8.0
• CLI Version: 3.9.1
• Nitro Version: 2.7.2
• Package Manager: npm@10.2.3
• Builder: -
• User Config: modules, i18n
• Runtime Modules: @nuxtjs/i18n@8.1.0

• Build Modules: -

Reproduction

Here is the reproduction: I have changed the direction of japanese lang to rtl for testing

version 8.1.0 https://stackblitz.com/edit/bobbiegoede-nuxt-i18n-starter-cpbimm?file=components%2FLangSwitcher.vue

version 8.0.1 https://stackblitz.com/edit/bobbiegoede-nuxt-i18n-starter-td21q6?file=components%2FLangSwitcher.vue

version 8.0.0 https://stackblitz.com/edit/bobbiegoede-nuxt-i18n-starter-9rzhrz?file=components%2FLangSwitcher.vue

Describe the bug

I have this in my app.vue file

after upgrading to 8.0.1 or anything else above from 8.0.0 version, the lang and dir attribute is not getting updated when i set locale from useI18n() unless I change page.

I read the docs and change logs but not sure if am I missing something or not

Additional context

No response

Logs

No response

[BobbieGoede]

You should switch locale using either setLocale from useI18n() or by navigating with switchLocalePath, setting locale directly may be fine when just using vue-i18n but we only document language switching using setLocale or switchLocalePath as this triggers more than just changing translations (as you have noticed).

This may seem to work in earlier versions, but what's really happening is that the head tags and language are not matching the page URL, which is not desirable behaviour.