关于watch把获取到的数据赋值给表单后，表单修改失效解决办法

需求：

封装一个表单的弹窗，既可以创建，也可以修改；

 

遇到的问题：

　　在watch中监听一个vuex的数据，来判断是创建表单还是修改弹窗中表单的数据；

　　

watch: {
    visible() {
      if (this.isAddSign === false) {
        this._getContract({
          signMemberID: this.IDs.signMemberID,
          refer: this.IDs.refer,
          userID: this.IDs.userID,
          oppsiteUserID: this.IDs.oppsiteUserID
        });
      }
    }
  },

这是判断是修改的弹窗，就需要先获取数据，赋值给表单，但是赋值完后，发现el-autocomplete，不能修改也不能删除了，select也失效了，查了资料说是因为watch赋值，所以form表单监听不到其内部的属性的变化，只能使用$set逐个设置进去。

具体如下：

_getContract(params) {
      getContract(params).then(res => {
        let copyForm = {};
        copyForm.position = JSON.parse(JSON.stringify(res.data.position));
        copyForm.salary = String(res.data.salary);
        copyForm.salaryDay = res.data.salaryDay;
        copyForm.runClient = Boolean(res.data.runClient);
        copyForm.workWeekDay = res.data.workWeekDay;
        copyForm.duty = res.data.duty;
        copyForm.workWeek = [res.data.workCycleStart, res.data.workCycleEnd];
        copyForm.attandance = [res.data.workHourStart, res.data.workHourEnd];
        this.contractID = res.data.ID;
        let str = JSON.parse(res.data.additional);
        copyForm.additional = [];
        if (res.data.additional) {
          for (let key in str) {
            copyForm.additional.push({
              label: key,
              value: str[key]
            });
          }
        }

        for (let val in copyForm) {
          this.$set(this.form, val, copyForm[val]);
        }
      });
    },

标红的部分是让表单数据可以继续修改使用的重点