v-t directive does not rerender when locale switches

[DerZade]

Reporting a bug?

v-t directive does not update when locale switches

Expected behavior

Changing the locale updates all references of v-t

Reproduction

Stackblitz: https://stackblitz.com/edit/vitejs-vite-3sfn11?file=src%2FApp.vue

GitHub Repo: https://github.com/DerZade/vue-i18n-locale-switching-bug-report

<script setup>
import { useI18n } from 'vue-i18n';

const { t, locale } = useI18n({ useScope: 'global' }); // useScope does not matter 
function changeLanguage() {
  locale.value = locale.value === 'en' ? 'ja' : 'en';
  console.log(locale.value);
}
</script>

<template>
  <button @click="changeLanguage">change</button>
  <span v-t="'hello'"></span>
</template>

System Info

System:
    OS: Linux 6.8 Ubuntu 24.04.1 LTS 24.04.1 LTS (Noble Numbat)
    CPU: (16) x64 AMD Ryzen 7 7840U w/ Radeon  780M Graphics
    Memory: 44.28 GB / 60.63 GB
    Container: Yes
    Shell: 5.2.21 - /bin/bash
  Binaries:
    Node: 20.18.0 - ~/.nvm/versions/node/v20.18.0/bin/node
    Yarn: 1.22.22 - ~/.nvm/versions/node/v20.18.0/bin/yarn
    npm: 10.9.0 - ~/.nvm/versions/node/v20.18.0/bin/npm
  Browsers:
    Chrome: 129.0.6668.100
  npmPackages:
    @vitejs/plugin-vue: ^5.1.4 => 5.1.4 
    vite: ^5.4.8 => 5.4.9 
    vue: ^3.5.12 => 3.5.12 
    vue-i18n: ^10.0.4 => 10.0.4

Screenshot

No response

Additional context

I started investigating this and found that apparently the composer of the v-t in my example is not the global composer (I don't know why tho, since there is only one instance in the whole app), therefore the watcher for the locale isn't added in the register hook of the directive:

vue-i18n/packages/vue-i18n-core/src/directive.ts

Lines 102 to 107 in 43072e8

	if (inBrowser && i18n.global === composer) {
	// global scope only
	el.__i18nWatcher = watch(composer.locale, () => {
	binding.instance && binding.instance.$forceUpdate()
	})
	}

Really dumb question: Why can't we just always add the watcher, why does it only work for the global instance?

Validations

• Read the Contributing Guidelines
• Read the Documentation
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussions

[kazupon]

Thank you for your reporting!

Hmm.
vue-i18n does not seem to work v-t on legacy mode, currently.
you can avoid composition mode.
https://stackblitz.com/edit/vitejs-vite-gdnzpe?file=src%2FApp.vue,src%2Fmain.js

Legacy mode will be removed in future versions of vue-i18n.
I recommend you will use composition mode.