vue watch深度监控一个对象下新增属性不生效问题

先简单还原下项目中遇到的问题：

adc为一个空对象，watch深度监听abc下的pageNum属性（此时还没有）。

data() {
    return {
      abc: {
        
      }
    }
},
watch:{
    'abc': {
      deep:true,
      immediate:true,
      handler(newV){
        this.pageNum = newV.pageNum
      }
    }
  },

我们都知道若直接使用下面1的方式不是响应式的，也就无法监听，改为方式2可监听。

1,

this.abc.pageNum = 1

2,

this.$set(this.abc,'pageNum',1)

这里重点要讲的是：

1，若写完方式1后再执行方式2也是无法达到响应式的，自然也无法监听。

2，若写完方式1后再 this.abc={}  情况 后再执行方式2也是可以的。

实际项目中没人会这么傻瓜的写，我也是在改同事代码的时候遇到这种问题，实际情况为在俩个组件中都改变pageNum的值，一个为方式1，另一个为方式2，方式1的组件有俩个方法还有  其中一个方法有this.abc={},这骚操作，这就导致页面展示时bug很是怪异！