Vue3 vue-i18n 切换语言无法响应式变化，如何解决？

OP你是怎么切换i18n当前语言的，有按照文档中的方式来切换吗？ 👉 #Locale Changing - Composition API | Vue I18n

<script setup>
const { t, locale } = useI18n({ useScope: 'global' })

locale.value = 'en' // change!
</script>

按照OP你的评论，猜测OP你可能是在声明的时候，直接把 t 函数 返回的文本值直接赋值给JS变量了。

以下是一个Demo片段，OP你理解一下其中的区别：

<template>
  <div>
    <p>text:{{ $t("message.hello") }}</p>
    <p>testRef: {{ textRef }}</p>
    <p>textComp: {{ textComp }}</p>
    <button @click="changeLocale">Change</button>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
import { useI18n } from 'vue-i18n'

const { t, locale } = useI18n({ useScope: "global" });

const textRef = ref(t('message.hello'))
const textComp = computed(() => t('message.hello'));

const changeLocale = () => {
  locale.value = (locale.value === "en") ? "ja" : "en";
  console.log('changeLocale textRef.value =>', textRef.value)
  text.value = t('message.hello')
  console.log('changeLocale textRef.value(赋值后)', textRef.value)
};
</script>