element ui checkboxの全选が一组である状態を、multi group（multiple groups）に変更する方法

data structureを大規模化する必要がある場合、 divに以下の内容を含む

      checkboxList: [
        {
          country: '埃及',
          isUpdate: true,
          isIndeterminate: true,
          checkAll: false,
          checkedChannels: [],
          channelList: [
            { name: '设备1', mode: 'uusd' },
            { name: '设备2', mode: 'app' }
          ]
        },
        {
          country: '加纳',
          isUpdate: true,
          isIndeterminate: true,
          checkAll: false,
          checkedChannels: [],
          channelList: [
            { name: '设备3', mode: 'uusd' },
            { name: '设备4', mode: 'app' }
          ]
        }
      ],<br></br>  
      isKey: Math.random(),

         <div v-for="(item, index) in checkboxList">
            <el-checkbox 
              :indeterminate="item.isIndeterminate"
              v-model="item.checkAll"
              :key="isKey"
              @change="handleCheckAllChange(item.checkAll, index)"
              class=" checkbox"
            >
              全选する
            </el-checkbox>
            <div style="margin: 15px 0;"></div>
            <el-checkbox-group 
              v-model="item.checkedChannels" 
              @change="handleCheckedChannelsChange(item.checkedChannels, index)"
              class=" checkbox-group"
            >
              <el-checkbox-group>
                <el-checkbox v-for="(channel, channelIndex) in item.channelList" 
                  :label="channel.name" 
                  :key="channelIndex">
                  {{ channel.name }}
                </el-checkbox>
              </el-checkbox-group>
            </el-checkbox-group>
          </div>

调用の方法は以下のとおり

   handleCheckAllChange(val, index) {
      console.log('val-00', val, index);
      let channelNames = [];
      item.channelList.forEach(channel => {
        channelNames.push(channel.name);
      });
      console.log('nameArr---', channelNames);
      item.checkedChannels = val ? channelNames : [];
      item.isIndeterminate = false;
      console.log('this.checkboxListList---', this.checkboxList);
    },
    handleCheckedChannelsChange(value, index) {
      console.log('value-111', value, index);
      console.log('this.checkboxList---222', this.checkboxList);
      let checkedCount = value.length;
      this.checkboxList[index].checkAll = checkedCount === this.checkboxList[index].channelList.length;
      this.checkboxList[index].isIndeterminate = checkedCount > 0 && checkedCount < this.checkboxList[index].channelList.length;
      this.isKey = Math.random();
    }

以上が関連する代码です。dataを大規模にし、各アイテムの checkout functionalityを独立させ、下标indexを介して modificationを管理します。