Vue新增表单数据增加了数据校验之后再次添加数据重置仍存在原始数据问题

以下图是在新增完一次数据之后，再次点击添加的两个界面
图一：点击添加按钮出现的界面

图二：点击重置之后原始数据出现的界面

图二是产生的现象，经各种尝试无效。

以下是vue关键代码：
新增框：

重置语句：
resetForm(formName) {
this.$refs[formName].resetFields();
}

继2021-07-21 13:04写的解答，这次已经解决了这个小问题。在回忆一下问题本身，第一次新增之后第二次新增会有红色提示，之前使用this.$refs['addForm'].clearValidate()方法，这个方法是用于清除数据校验的，理论上是可以实现的，但是控制台报错Cannot read property ‘clearValidate‘ of undefined“,经查验并参考网址：https://blog.csdn.net/qq_36437172/article/details/107348939，问题解决，产生问题的原因是Dom 没有加载完成，导致获取不到refs元素，因此，需要使用
this.$nextTick(()=>{
this.$refs['addForm'].clearValidate();
})
来实现这一功能，那就得说一下$nextTick()函数的作用了，这个方法的作用基本功能就是获取更新之后的DOM。具体细节有待查验。目前只能理解到这一步，之后在来更新吧。

参考一下这个 https://blog.csdn.net/baidu_23275675/article/details/106196253

在点击出现弹框时的方法应该先执行以下操作：

表单绑定的model 对象置空 this.addForm = {}
表单字段清空：this.$refs[‘Formref’].resetFields();

通过各位的热心解答，以及同事的帮助，最终解决，首先我发现我没有把问题描述清楚，其实重置表单数据很简单，但是就是同时重置表单数据和那个红色提示才会引发我遇到的这个问题。我个人理解，他的这种实现机制对于编辑数据时重置不至于将数据直接清空，所以新增时我就没有使用系统写好的函数this.$refs[formName].resetFileds(),而是自己重写这个逻辑；以及

还有一个问题，如果我只写this[formName]={}或者this.addForm={},会出现重置内容会失效并报错的问题。所以最好把数据写全，这个是我目前能解决的方法。
此外，在点击新增按钮之后，弹出新增窗口之前，还要再次清空回显数据这应该是有表单缓存还是啥的（小白理解，请谅解）

目前问题基本解决，但是还有一些细节没有解决，比如说我在新增数据时，输入了数据之后想重置所有数据重新输入，这时点击了重置按钮后红色提示会出现，通过再次点击重置会消失，还有就是第二次新增也会出现红色提示，网上有那种解决方法说先让校验失效然后改变后在生效，不知道能不能成功，缓几天再看吧，有人会的话也可以帮助我，谢谢大家。