Vue Composition API的ref在外部JS模块中响应性失效如何解决？

核心原因（概率最高）：响应式系统实例冲突 #

• 你的npm包直接将@vue/composition-api列为普通依赖，且未做打包处理，npm安装时会在你的包目录下单独安装一份@vue/composition-api，和业务项目中依赖的@vue/composition-api是两个完全独立的实例
• 你在包内通过包自带的ref生成的响应式变量，只能被包内的响应式系统追踪，业务项目的Vue实例无法识别这个ref的响应性，自然不会触发视图更新

其他可能原因 #

• 代码逻辑遗漏：你贴的register方法中，callback里使用的fieldId变量未声明赋值，会导致errorMessages.value永远不会被触发更新（如果你实际代码已经补了这个逻辑可以忽略）
• 模板解包问题：部分旧版本@vue/composition-api对顶层ref的自动解包存在兼容问题，你可以尝试在模板中使用errorMessages.value.length验证是否能正常渲染

修复方案 #

1. 修改你的npm包的package.json配置，将@vue/composition-api从dependencies移到peerDependencies中，声明该依赖由宿主项目提供，避免安装多份重复依赖
2. 保留@vue/composition-api为开发依赖，用于本地测试，发布时不要将其打包进生产代码
3. 如果需要兼容多版本Vue，可以优化你的Validator类，提供初始化参数接收宿主项目的ref/reactive等响应式API，包内统一使用传入的API生成响应式变量，彻底避免实例冲突

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