el-select校验失效问题

最近项目里遇到一个奇怪的交互bug，表单写了rules校验规则，而且也写了prop值， 对el-select赋值了但是仍会触发必填校验，提示XXX未选择，也就是校验失效的问题，后来度出来了解决方案，特此做个记录。

   <el-col :span="12">
              <el-form-item :label="`对应表：`" prop="tableName">
                <el-select
                  v-model="addForm.tableName"
                  placeholder="请选择对应表"
                  clearable
                  style="width: 100%;max-width: 100%;"
                  @change="change"
                  :disabled="operType == 2"
                >
                  <el-option
                    v-for="item in tableList"
                    :key="item.tableName"
                    :label="item.tableName"
                    :value="item.tableName"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>

form表单里面，el-select会出现失效的情况，尤其是el-form-item 里面又嵌套了el-row。层级太深了，form检测不到addform的变化，这个时候要么change事件里面强制更新dom触发（视图更新）

change(val){
    this.$set(this.addForm,'tableName',val)
    this.$forceUpdate()
}

要么在change事件里面对form表单绑定的数据进行拷贝

this.addForm = JSON.parse(JSON.stringify(this.addForm))    
this.addForm = { ...this.addForm }

change(val){
    this.addForm={...this.addForm}
}

我的问题就是通过对表单进行拷贝解决的。