关于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更新。