Vuejs checkbox child state not updating

I'm a beginner in Vue.js and I'm stucked at this:

 <span>Condition</span>
              <el-select style="width: 94%;" v-model="condition[index+1]">
                <el-option label="Ambient" value="Ambient">Ambient</el-option>
                <el-option label="Frozen" value="Frozen">Frozen</el-option>
              </el-select>
              <h4>
                <el-checkbox v-model="check[index+1]" @change="selectAllPanels(index+1, item.id)">Select All</el-checkbox>
              </h4>
              <div class="card-content panels-category" v-for="(category, n) in panelsCategory[item.id]" :key="category.id" style="float: left">
                <div class="panel-category" v-if="searchList[item.id][n].length > 0">
                  <el-checkbox v-model="checkAll[index+1][item.id][n]" @change="checkAllPanel(index+1, item.id, n)"  :label="category.id" :key="category.id">
                    <h5 class="card-title"></h5>
                  </el-checkbox>
                </div>
                <div class="panels" v-for="panels in searchList[item.id][n]" :key="panels.id">     <!-- in panelsCategory[item.id][n]-->
                  <!--<el-checkbox-group class="panels-name" v-model="selectedPanels[index+1][item.id]"  @change="handelAddSample(index+1)">-->
                    <el-checkbox :checked="checkAll[index+1][item.id][n]" class="panels-name" v-model="selectedPanels[index+1][item.id]"  @change="handelAddSample()" :label="panels.id" :key="panels.id" ></el-checkbox>
                    <el-popover class="panel-popover"
                                trigger="hover"
                                @show="getPanelTest(panels.id)"
                                placement="bottom">
                      <el-button slot="reference" class="ti-help popover-help"></el-button>
                      <slot></slot>
                    </el-popover>
                  <!--</el-checkbox-group>-->
                </div>
                <div class="panels" v-if="searchList[item.id][n].length > 0" v-for="i in getPanelsLength(index+1, item.id, n)" ></div>
              </div>

At click on plus button from the right side-->click sth from the dropdown list-->it displays the new tab So, here, in these tabs comes the magic: the checkboxes are not working well, I mean at click on "Select All" checkbox, all checkboxes should be selected, but this doesn't happen until one subcategory checkbox is clicked (like the third child), but the list where the selected checkboxes are stored is populated well. I tried this.$forceUpdate() and even this.$set() inside the functions called at click on select All and category title (those with blue background) Can somebody please help? I tried to reproduce it in this fiddle Here.