vue改变data里对象的属性

Vue双向绑定是通过Object.defineProperty()函数来劫持各个属性的setter,getter属性，数据变动，通知订阅者，触发更新回调函数，重新渲染视图。
当直接对data里对象增加属性的时候，这时候是没有setter,getter属性的，Vue实例化会遍历data里面的对象的所有的属性，并通过Object.defineProperty()函数把这些属性全部转为 getter/setter。受现代 JavaScript 的限制 (以及废弃 Object.observe)，Vue 不能检测到对象属性的添加或删除。
根据官方文档定义：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新，也就是说如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。。
当我们把一个JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty把这些属性全部转为 getter/setter。

方法1：Vue.set( target, propertyName/index, value )

如果$set()方法不生效时,可以改用Object.assign()试试，也就是给对象重新赋值

方法2：使用Object.assign()新增,或者改变原有对象。

export default {
  name: "addEdit",
  data() {
    return {
      config: {
        number: [0],
        content: "{nt}个",
        formatter,
        animationCurve: "easeInSine",
        style: {
          fontSize: 40,
          fontWeight: "bold",
          fontFamily: "PingFang SC",
          fill: "#ff8933",
        },
      },
    }
  },
  mounted(){
  	this.config.number = [12345];
    this.config = Object.assign({}, this.config);
  }
}

直接修改，此时打印this.config.number
this.config.number = [12345]

使用this.config = Object.assign({}, this.config);

建议深入理解一遍Vue官方文档深入响应式原理：深入响应式原理