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