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>

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