vue-cli 热更新问题？

Question

vuecli.vue3，一个简单的页面，点击按钮调出弹窗：

vscode每次改完代码保存->热更新，console就会报出警告，component丢失了，应该是子组件从新渲染，然后代码中的proxy还保持的是之前渲染的子组件；

这时候页面还是好的，报错出现在点击事件里：

子组件丢失了，要刷新才能同步，有没有解决办法

Answer 1

问题产生的原因是我想在父组件用proxy的$refs去调用子组件方法，热加载就会出现问题;
我又尝试了另外两种方式，都没有问题，第二种还算简单：
一：这里:ref是响应式，会时时更新变量数据，但代码比$refs繁琐多了

二：直接定义ref为响应式，名字对上就行了：

相比较this.$refs还是多写了一行代码，可能是还不习惯vue3的思想；
后面还得解决eslint 报错，好烦: )

Answer 2

看起来是业务代码中的问题，在组件渲染完成之前就调用了组件内部的方法。
在调用 $refs.dialogModel.open() 外部套上 $nextTick 应该就可以解决。