element中 input赋值后无法再次输入值

前言 ：工作需求中遇到一个监听选择框的值赋值对应input框的值,并支持input框的输入，在我监听赋值的之后采用的是向对象中添加属性的方法代码如下写入后input框不能输入了 ，并在赋值的input上绑定了 input事件监听去用$forceUpdate()去更新也没有用，百度了才发现是我赋值的写法有问题，用$set 才正常展示输入。

this.dataDetail = {...this.dataDetail, feeTypeDesc:  res.label}

方法一 ：$forceUpdate()

使用场景：

数据层次太多， 数据修改了，但页面没有重新渲染；
如果在vue的data中没有进行声明，给没声明的属性赋值（即非响应式的），不会引起vue实例的重新渲染。

// html 给input绑定input事件
<el-form-item class="dialog-row" label="费用收取方式描述:" prop="feeTypeDesc">
    <el-input
      :value="dataDetail.feeTypeDesc"
      style="width: 80%"
      :readonly="readonly"
      @input="change($event)"
    />
  </el-form-item>
// js 中使用$forceUpdate()
	change(e) {
      this.$forceUpdate();
    },

方法二： $set

// html

<el-form-item class="dialog-row" label="费用收取方式:" prop="feeType">
    <el-input
      v-if="dialogTitle == '查看'"
      v-model.trim="dataDetail.feeType"
      style="width: 80%"
      :readonly="readonly"
    />
    <el-select
      v-else
      v-model.trim="dataDetail.feeType"
      clearable
      style="width: 80%"
    >
      <el-option
        v-for="(feeTypeItem, index) in feeTypeList"
        :key="'feeTypeItem' + index"
        :label="feeTypeItem.label"
        :value="feeTypeItem.value"
      ></el-option>
    </el-select>
  </el-form-item>
  <el-form-item class="dialog-row" label="费用收取方式描述:" prop="feeTypeDesc">
    <el-input
      :value="dataDetail.feeTypeDesc"
      style="width: 80%"
      :readonly="readonly"
      @input="change($event)"
    />
  </el-form-item>

// js
 watch: {
    "dataDetail.feeType": {
      handler(newVal) {
        // console.log(newVal);

        if (newVal) {
          this.feeTypeList.map((res) => {
            if (res.value == newVal) {
              this.$set(this.dataDetail, "feeTypeDesc", res.label);
            }
          });
        }
      },
    },
  },

 methods: {
    change(e) {
      this.$forceUpdate();
      this.$set(this.dataDetail, "feeTypeDesc", e);
    },
  },