ElementUI的表单验证失效，出现意想不到的问题

起因

项目中有一个心理测试模块，需要实现修改功能。

尝试一

页面渲染之前，created时，发送一个请求，拿到该测试问卷的基本信息（名称、简介、测试结果等），该值命名为testData。

created(){
   
   const data = {
   
   	params: {
   id: this.$route.query.id}
   	}
   this.apiGet('***/***/getQuestionById', data).then(res => {
   
   	this.testData = res.data[0]
  }
}

问题

点击修改问卷，让form表单里填充testData的值。这样bug就来了，我在form表单里修改testData.title的值的同时，页面左上角的title也跟着改变。因为左上角的值和input框里的值绑定的是同一个值，这时，如果我在input框里修改title的值，但是点击取消，不提交表单。按需求来说，该title是不应该被修改的，但是实际上被修改了。这时，用户只能通过刷新的方式，重新获取该问卷的基本信息。

解决

我想到可以用vue里的.lazy方式，让输入框里的值在修改的同时，左上角的值不会同时改变。但是一旦input框失去焦点，该值还是被改变了。所以这样也行不通。

尝试二

我重新申请一个变量formData，用来存放testData。此处一定要注意通过 值引用 赋值，不要把地址赋值过去了。在尝试一中，created时，获取到testData后，就给formData赋值。

created(){
   
   const data = {
   
   	params: {
   id: this.$route.query.id}
   	}
   this.apiGet('***/***/getQuestionById', data).then(res => {
   
   	this.testData = res.data[0]
   }
   this.testForm<