vue.js是通过数据劫持的方式实现数据的双向绑定的，其中过程如下：
当把一个JavaScript对象传给Vue实例的data选项时，Vue会遍历此对象的所有属性并使用 Object.defineProperty()，把这些属性全部转化为 getter/setter 。每个组件实例都有相应的 watcher 实例对象，它会在组件渲染的时候把属性记录为依赖，之后当依赖的setter被调用时，会通知watcher重新计算，从而致使它关联的组件得以更新。因此，每当数据变化的时候会引起视图的变化，更新view。
因为Vue在初始化实例时会对属性进行 getter/setter 转化，这样，被转化的属性就是 响应式的，而只有在data中声明的属性会执行这个过程。所以，后续通过JavaScript传过来的对象属性因为没有在 data 中声明，所以并不会执行这个转化过程，因此这些属性全都是 不响应式的。
也是因为这个原因，现在的 Vue.js 无法监听到对象属性的添加和删除，也无法检测到数组的变动。
我个人在解决这个报错问题的时候是通过将报错的属性名在 data 中先进行初始化声明，后续给对象赋值的时候再进行覆盖的方式。但是这种方式治标不治本。个人建议还是使用全局的方式进行声明。
推荐以下博文，讲解非常的详细。https://www.cnblogs.com/linsx/p/9181237.html