el-checkbox在父子组件同时显示配合拖拽效果无法改变之前选中的值处理

需求：有父组件、嵌套子组件两个页面，父组件一块区域用于显示复选框，子组件一块区域用于拖拽内容时改变其在父组件中的位置、内容、选中效果。如下图

因el-checkbox-group增加了change事件，数据改变时会向其中增加一个用于存储选中值得数组，同时各个选项对象中也包含了当前值选中/不选中的字段，因此在拖动右侧选项时可做如下判断

singleEnd(evt){
      this.drag=false;
      //如果选项(单选/多选)存在选中的值，拖拽时将选中字段值更换
      if(this.childDetail.type==4){//单选组件
        if(this.childDetail.radioChoose){
          this.childDetail.radioChoose = evt.newIndex+1;//选中标识等于移动后的新标识
        }
      }else if(this.childDetail.type==6){//多选框组件
      let checkListData = this.childDetail.checkList;
        if(checkListData.length>0){
          //根据选项数组选中值重新构造选中数组
          this.childDetail.checkList = [];
          let getOptionList = this.childDetail.optionList;
          for(let k=0;k<getOptionList.length;k++){
            if(getOptionList[k].checked){
              this.childDetail.checkList.push(k);
            }
          }
        }
        console.log(this.childDetail);
        this.$emit('my-event',this.isShow);
      }
    },