I18n cannot respond to language changed in children components

[zoiewleung]

Reporting a bug?

For projects created by vue-cli4, internationalization is supported using Vue add I18N. When the children component and parent component contain SFC I18N tags at the same time, the language of the children component cannot be correctly switched to the current language when switching the language in the parent component

Expected behavior

When switching languages, subcomponents can correctly respond to language changes

Reproduction

Detail and reappear
Vue-cli:
version: @vue/cli 4.5.13

Step:
1、Vue create i18n-demo
2、vue add i18n
Options:

📦 Installing vue-cli-plugin-i18n...

• vue-cli-plugin-i18n@2.1.3
  added 14 packages from 11 contributors in 10.442s

91 packages are looking for funding
run npm fund for details

✔ Successfully installed plugin: vue-cli-plugin-i18n
? The locale of project localization. en
? The fallback locale of project localization. en
? The directory where store localization messages of project. It's stored under src directory. locales
? Enable locale messages in Single file components ? Yes

🚀 Invoking generator for vue-cli-plugin-i18n...

Vue.config.js:
module.exports = {
pluginOptions: {
i18n: {
locale: "en",
fallbackLocale: "en",
localeDir: "locales",
enableInSFC: true,
},
},
};
parent compoent:

{{ $t("lang") }}

<script> // @ is an alias to /src import HelloI18n from '@/components/HelloI18n.vue' export default { name: 'Home', components: { HelloI18n, }, methods: { handler() { this.$i18n.locale = this.$i18n.locale == 'en' ? 'ja' : 'en' }, }, } </script> { "en": { "lang":"change language", "about": "about" }, "ja": { "lang":"言語を切り替え", "about": "について" } }

children component:

{{ $t("hello") }}

<script> export default { name: "HelloI18n", }; </script> { "en": { "hello": "Hello i18n in SFC!" }, "ja": { "hello": "こんにちは、i18n in SFC!" } }

System Info

node:v14.17.3
vue-cli: @vue/cli 4.5.13

Screenshot

Additional context

No response

Validations

• Read the Contributing Guidelines
• Read the README
• 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 Discussion.

[zoiewleung]

Vue ver: ^2.6.11
vue-i18n ver: ^8.25.0
intlify/vue-i18n-loader ver: ^1.1.0