elementUI点击多选框数据改变，视图不改变问题

先说一下我的场景：

就是在表格里面选择某种产品，然后把这些产品加入订阅单，点击订阅单，就出现下面的图片，默认所有的产品全选，我就给所有数据加了一个chenked为true的属性

遇到的问题：由于数据是从表格传过来的，然后点击发布渠道，发现控制台数据变了，但是视图并没有更新，如下图：我点击测试模型，控制台打印为false，但是视图就是不改变

原因：由于我传过来的数据是数组，如下图，数组中数据发生变化，vue是侦听不到的，但是重写的这几个数组的方法（比如splice()、pop、push等）修改的数组是可以侦听到的，这几个方法都有被vue重写。

解决： 下面两种方法都可以

this.subscribeData.splice(); // 更新视图

this.$forceUpdate(); // 强制更新

部分代码如下:

      <div class="subscribe-list">
        <div class="subscribe-list-title">订阅单</div>
        <el-checkbox
          v-model="checkAll" 
          @change="handleCheckAllChange">全选</el-checkbox>
        <div style="margin: 10px 0;"/>
        <div
          v-for="(item, index) in subscribeData" 
          :key="index"
          class="model-name">
          <el-checkbox
            v-model="item.checked"
            class="model-name-check"
            @change="checked=>changeCheck(checked, item)">
            {{ item.modelName }}
          </el-checkbox>
          <div class="release-channel">
            <div class="release-channel-title">发布渠道</div>
            <div class="release-channel-content">
              <el-checkbox-group v-model="item.publishChannel">
                <el-checkbox
                  v-for="(item, index) in publishChannels"
                  :key="index"
                  :label="item.code">
                  {{ item.label }}
                </el-checkbox>
              </el-checkbox-group>
            </div>
          </div>
        </div>
      </div>

    changeCheck(checked, item) {
      console.log(checked);
      this.subscribeData.forEach(val => {
        if (val.id === item.id) {
          val.checked = checked;
        }
      });
      this.subscribeData.splice(); // 更新视图
      for (let i = 0; i < this.subscribeData.length; i++) {
        if (!this.subscribeData[i].checked) {
          this.checkAll = false;
          return;
        }
        this.checkAll = true;
      }
    },