Vue配合Composition API使用自定义校验器模块时errorMessages无响应问题

核心原因：@vue/composition-api 实例不共享 #

你的问题90%以上是npm模块和宿主Vue项目使用了两份独立的@vue/composition-api实例导致的：

• 你在Validator.js中主动调用了Vue.use(VueCompositionAPI)，且如果你的模块将@vue/composition-api放在了dependencies依赖项中，npm安装时会在你的模块目录下单独安装一份该依赖
• 宿主项目本身也会安装并注册一份@vue/composition-api，两份不同实例生成的ref响应式对象互不兼容，宿主的Vue渲染器无法识别模块内生成的ref的变更通知，只有组件强制重渲染时才会读取到最新值

次要排查点：代码遗漏问题 #

你贴的代码里存在明显的变量未定义问题：register方法中没有声明fieldId变量，但回调里直接判断if (fieldId === id)，如果实际代码确实存在这个问题也会导致逻辑异常，不过你提到模块内可以打印到errorMessages.value的最新值，说明这块可能是你精简代码时的遗漏。

1. 移除模块内的 Composition API 注册逻辑
   删掉Validator.js中的Vue.use(VueCompositionAPI)这行代码，模块不应该主动注册全局插件，该操作交给宿主项目完成。

2. 调整依赖声明
   将你npm模块package.json中的@vue/composition-api从dependencies移动到peerDependencies，设置合理的版本范围，要求宿主项目自行安装该依赖，保证模块和宿主使用同一份实例：

{
  "peerDependencies": {
    "@vue/composition-api": "^1.0.0",
    "vue": "^2.6.0"
  }
}

3. 验证方案
   改完后重新打包模块，在项目中重新安装测试，即可正常触发响应式更新。如果需要临时验证问题，可以在组件setup中加一段监听逻辑：

watch(errorMessages, (newVal) => {
  console.log('错误信息更新', newVal)
}, { deep: true })

如果调整依赖前监听完全不触发，调整后可以正常触发，即可确认是实例不共享的问题。

内容的提问来源于stack exchange，提问作者thelandog