表格按钮点击渲染问题

遇到一个究极麻烦的问题：

vue的table组件，当点击父表时，字表的checked 值变化，但是颜色渲染没有，如图：

 （子组件按钮颜色渲染没有被监听到）

（但是值是有变化的）

解决 ：只是因为有些初始方式没有被监听到（vue有时候很傻）

//选中变色
        checkedToggle(idx,i){
          const that=this;
          console.log(idx,i)
          if(typeof i=='undefined'){
            that.tableData[idx].checked=!that.tableData[idx].checked
            if(that.tableData[idx].checked){
              that.tableData[idx].list.forEach(val=>{
                this.$set(val,'checked',true);
               // val.checked=true
              })
            }else{
              that.tableData[idx].list.forEach(val=>{
                this.$set(val,'checked',false);
                //val.checked=false
              })
            }
            that.$set(that.tableData,idx,that.tableData[idx])
          }else{
            that.tableData[idx].list[i].checked=!that.tableData[idx].list[i].checked
            if(that.tableData[idx].list.every(v =>{return v.checked})){
              that.tableData[idx].checked=true
            }else{
              that.tableData[idx].checked=false
            }
            that.$set(that.tableData,idx,that.tableData[idx])
          }
        },

表格图标渲染的代码：

<i class="el-icon-success handle-icon" :class="{blue:scope.row.checked}" @click.stop="checkedToggle(scope.$index)"></i>