vue+element遇到的对象属性监听问题

当使用element的dialog组件时，赋值对象时监听出了问题。

赋值步骤：

initUpdate: function (obj) {
      this.loadingMapFunc();
      this.clearDate();//先clear对象
      this.updateBeforeData = this.copyDeep(obj);
      //然后给对象赋值
      for (var key in this.formDatas) {
        this.$set(this.formDatas, key, obj[key]);
      }//赋值完并没有进入监听的方法（即使属性值前后不同）
      setTimeout(
        function () {
          this.$set(this.formDatas, "areaId", obj["areaId"]);
        }.bind(this),
        500
      );
    },

监听方法：

computed: {
    dataListNew() {
      return JSON.parse(JSON.stringify(this.formDatas));//使用深度复制避免引用的值相同
    },
  },
  watch: {
    dataListNew: {
      handler: function (val, oldVal) {
        if (val.townId != oldVal.townId) {
            //业务逻辑
        }
      },
      deep: true,
    },
  },

即使使用深度监听也无法解决监听不到对象属性变化的问题，后来使用了dialog的关闭摧毁节点的属性后就可以了。

 

<el-dialog
      :title="dialogTitle"
      :visible.sync="dialogOption"
      width="60%"
      :close-on-click-modal="false"
      :destroy-on-close="true"
    >
      <form-widget ref="_formWidget" :areas="areas" @queryData="queryNewData"></form-widget>
      <span slot="footer" class="dialog-footer">
        <button type="button" class="btn btn-primary" @click="confirmDataFunc">确定</button>
        <button type="button" class="btn btn-default" @click="dialogOption=false">取消</button>
      </span>
</el-dialog>

问题虽然解决，其原理还是很模糊，求解答！