vue.js改變數據后頁面不改變，有動圖演示描述問題

我用iview的checkbox組件做一個三級的復選框，需要根據數據回顯選中的數據，我在CheckBoxGroup上雙向綁定了一個chenckedInfoi的數據，這里包含了初始選中的id,來達到回顯效果。然后我點選單個checkbox，沒問題，可以控制全選按鈕的樣式，但是我在全選的checkbox上綁定事件，設置chenckedInfoi卻不能控制他下面的checkbox們選中，達不到全選效果，但是我如果在CheckBoxGroup雙向綁定個單純的數組，點全選時候設置這個數組，就可以達到全選效果，不知道為啥，上效果圖，（打印的是經過事件設置好的chenckedInfoi）：

我的DOM結構：

事件

DOM代碼（已經省略部分不重要代碼）：

    <div class=" first-level" v-for="(v,i) in authInfo">
      <div class="first-level-title">
        <Checkbox
          :key="v.id"
          :indeterminate="firstIndeterminate"
          :checked="checkFirstAll"
        >
          {{v.name}}
        </Checkbox>
      </div>
      <div v-model="secondCheckGroup" class="second-level" v-for="(item,k) in v.children">
        <div class="second-level-title">

          <Checkbox
            :value="checkedInfo[i][k].length===item.children.length"
            :key="item.id"
            :indeterminate="checkedInfo[i][k].length!==item.children.length && checkedInfo[i][k].length!==0"
            @click.prevent.native="thirdAll(i,k)"
          >
            {{item.name}}
          </Checkbox>
        </div>
        {{`選中的個數-------${checkedInfo[i][k].length}`}}
            <CheckboxGroup class="third-level" v-model="checkedInfo[i][k]">
              <Checkbox v-for="m in item.children" :label="m.id" :key="m.id">
                {{m.name}}
              </Checkbox>
            </CheckboxGroup>

      </div>
    </div>

js代碼：

      data(){
          return{

             checkedInfo:[]//用于復選框雙向綁定的數據
          }
      },
            created(){
        axios.get(`${API}/role/info`,{
          params:{
            id:this.$route.query.id
          }
        }).then(response=>{
          let res = response.data;
          if(res.result){
            this.roleInfo = res.data.roleInfo;
            //請求回來的授權數據（也就是復選框選中的數據）
            this.authInfo = res.data.authInfo.data;
            
            //設置初始選中項
            this.authInfo.forEach((v,i)=>{
            //循環(huán)，讓checkedInfo結構與DOM層級結構一致
              this.checkedInfo.push([]);
              v.children.forEach((m,n)=>{
                this.checkedInfo[i].push([]);
                console.log(m.children)
                m.children.forEach((j,k)=>{
                  if(j.status){
                    this.checkedInfo[i][n].push(j.id)
                  }
                })
              })
            })
          }
        });
      },

      methods:{
        //全選事件
        thirdAll(i,k){
          let tempArr = [];
          this.authInfo[i].children[k].children.forEach(v=>{
            tempArr.push(v.id)
          });
          this.checkedInfo[i][k] = tempArr;
          console.log(this.checkedInfo[i][k]);
        },
    }