起因

最近想拿vue3 练练手，在编写表单时使用了element plus 的form表单，在编写校验提醒时遇到如下问题
无论如何切换语言，message 始终提示的是中文语言包

const i18n = useI18n()

const rules = ref({
  username: [
    {
      required: true,
      trigger: 'blur',
      message: i18n.t('message.usenameRule')
    }
  ],
  ...
})

如上编写代码后， 无论如何切换语言 message 始终是用的中文语言包，查了半天资料后，发现网上的相关例子也是这样写，但没有问题。

解决

在外面包一层 computed就可以解决
怀疑是因为i18n丢失了响应式，套了一层computed 使得message 获取的是一个计算属性，计算属性依赖i18n 达到了更新的作用

const  usernameRuleMessage = computed(()=> i18n.t('message.usenameRule') ）

const rules = ref({
  username: [
    {
      required: true,
      trigger: 'blur',
      message: usernameRuleMessage 
    }
  ],
  ...
})

后续

具体产生原因还没有发现，在js文件中使用i18n 功能就能正常使用，useI18n 使用就必须套一层 computed
目前版本 vue-i18n： ^9.1.10