vue数据改变没有更新视图的问题

昨天跟着一个视频做了一个购物车的小案例，在做添加购物车的时候，发现每次添加相同的商品，数量确实增加了一个，但在页面上显示的数量却并没有变化，百思不得其解，在询问了下别人之后终于明白了，下面来记录一下。
1、添加购物车的代码如下 注释掉的是我自己写的错误的代码，这种写法不会在页面上更新商品的数量

addToCart(index) {
      let currentItem = this.courseList[index];
      let hasCourse = this.courseItem.find(x => x.id == currentItem.id);
      if (hasCourse) {
        hasCourse.number += 1;
      } else {
        // currentItem.number = 1;
        //  this.courseItem.push(currentItem);
       
        this.courseItem.push({
          ...currentItem,
          number: 1,
          isActive: true
        });  
      }
    },

我一开始的写法是先添加number的属性，然后在push到购物车的数组中，这种写法vue是不能检测到数组中number的变化的。

注意

由于 JavaScript 的限制，Vue 不能检测以下数组的变动：

1、当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue
2、当你修改数组的长度时，例如：vm.items.length = newLength