Vite/Vue3项目中Pinia Store的ref/computed修改后HMR不更新

问题概述 #

在Vue3 + Vite + Pinia的基础项目中，热模块替换（HMR）在绝大多数场景下工作正常，但仅导入的Pinia Store内的ref无法触发页面自动更新：

• 直接修改.vue组件内的ref并在模板中使用时，页面会自动同步变更；
• 修改Pinia Store中的ref后，必须手动刷新页面才能看到变更。

已尝试的解决方案 #

• 调整Store导入路径：尝试过相对路径import { useAuthStore } from '../../../store/auth';和项目根路径import { useAuthStore } from '/src/store/auth';两种方式
• 切换Store定义风格：分别用Setup Store和Options风格定义Store，问题依旧
• 参考Stack Overflow中关于嵌套组件HMR不触发、JS文件变更不更新的相关问题方案，未解决
• 修改Vite配置启用监听轮询：添加server: { watch: { usePolling: true,} }，但官方文档明确此方案并不理想，且未解决问题
• 按照Pinia文档要求在Store声明中添加acceptHMRUpdate，此时控制台能检测到Store文件的变更，但页面视图仍无更新

更新说明 #

查阅Pinia相关Issue（编号843）后得知，此情况属于预期行为，但按照该Issue中提到的「注释代码→修改值→取消注释」的操作步骤尝试后，仍无法触发HMR更新，需要对该操作方案进行详细解释。

注意事项 #

• 页面功能本身无异常：通过用户输入操作更新Store时，页面视图能正常响应变更，仅开发阶段直接修改Store文件中的ref值时无法触发HMR
• 并非所有JS文件都存在此问题：Composables的HMR工作正常，其他从.js文件导入的变量变更也能正常触发HMR

版本信息 #

"pinia": "^2.0.36",
"vue": "^3.2.25",
"vite": "^2.9.9",

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