关于vue3:VUE在data中监听新的data

Data:
 

{          key: 5,          prop: "colorBook",          label: "高模模型文件",          render: (scope) => {            const { $index } = scope;            const thisProp = `3dModel_sil3dHighModel_${$index}`;            let ele = [];            if (!this.$data[thisProp]) {              this.$data[thisProp] = [];            }            console.log(this);            ele = (              <ElFormItem                prop={thisProp}                label-width={0}                style={{ marginBottom: 0 }}              >                <FilesUpload                  prop={thisProp}                  limit={3}                  uploadFunction={this.uploadFunction}                  removeFunction={this.removeFunction}                  fileList={this.$data[thisProp]}                />              </ElFormItem>            );            return ele;          },        },

Methods:
  

  async uploadFunction(file, prop) {      let type = "";      switch (true) {        case /sil3dHighModel/.test(prop):          type = "3dHighModel";          break;        default:          break;      }      const formData = new FormData();      formData.append("file", file);      const res = await uploadPatternImage(formData, { type });      let result = false;      if (res.code === 200) {        if (!this.$data[prop]) {          this.$data[prop] = [];        }        this.$data[prop].push({ name: res.data, url: res.data });        console.log(this);        this.patternInfo[prop] = this.$data[prop];        result = true;      }      return result;    },

如上的代码，第一段是监听在data中的一段渲染表格列的代码，而后因为表格有个用户点击自增行的性能，所以fileList的key可能有有数多个，名字也不能确定，须要通过逻辑去减少。
后面尝试了一种写法this[prop],发现尽管this.[prop]是有变动的，但并不能触发页面的update。初步断定this外面属于data的字段是VUE深拷贝的正本，由data的变动在proxy的set外面驱动。

解决方案：

通过间接设置在this.$data外面，视乎绕过了VUEdata()的拷贝逻辑，尽管没有在this中监听，然而能从this.$data中取到，并且失常触发页面update更新。