解决vue多层数据结构动态绑定失效

数据结构如下：

currentWarningRulesInfo是父组件传过来的数据。currentWarningRulesSymbol数组未能实现响应式。
因为这个二层的数组是我从后台那里拿过来后自己进行转换后新增的数组，不知道为什么没有成为响应式的数据。

（后来原因我找着了！！！！后面再说，先说怎么处理的）

处理方式

 watch: {
    currentWarningRulesInfo: {
      handler: function(val, oldVal) {
        this.warningRulesInfo = JSON.parse(JSON.stringify(val))
      },
      // 深度观察
      deep: true
    }
  },

在watch中深拷贝了currentWarningRulesInfo，赋值给了warningRulesInfo，并之后都用warningRulesInfo进行渲染，这样在该组件中的数据都是响应式的了。

后记

终于找到了为什么currentWarningRulesSymbol未能实现响应式的原因了。

看到上图了么，因为我先执行了赋值操作，后再进行了数据的修改（增加）操作。
具体原理是什么我也不清楚，可能是因为在self.currentWarningRulesInfo = data，这个操作时，此时还没有currentWarningRulesSymbol，因此这个数据就不是响应式的，后面我对self.currentWarningRulesInfo增加了currentWarningRulesSymbol，但是这个数组却不是响应式的。
好像是这样的。所以下次记住了，要先操作，后赋值。

具体官方原理要是有大神来帮我解释一下就麻烦多指教了。