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>

問題雖然解決，其原理還是很模糊，求解答！