Not able to uncheck/check chekboxes on uncheck/check of header checkbox after individual checkboxes are interacted with - Vuejs

Situation 1 - I check my individual checkboxes, my header checkbox gets checked. This is method 1 and works fine.

Code for same

index.vue

<VCheckbox
 checked={this.checkSelections[idx]}
    nativeOnChange={e => {

    this.$set(this.checkSelections, idx, e.target.checked);
    let allSelected = true;
    for (let i = 0; i < this.checkSelections.length; i++) {
        allSelected = this.checkSelections[i];
        if (!allSelected) break;
    }
    this.$root.$emit("checkmarkHead", { allSelected });
    }}
/>

Head.vue

  mounted() {
    this.$nextTick(() => {
        this.$root.$on("checkmarkHead", ({ allSelected }) => {
        console.log("checkmarkHead", allSelected);
         this.allSelected = allSelected;
      });
    }

  },

Situation 2 -

I check my header checkbox and all my checkboxes are checked. Vice-versa is true as well. So method 2 corresponding to this works fine too.

Code for same -

Head.vue

  <HeadItem>
    <VCheckbox
        checked={this.allSelected}
        nativeOnChange={e => {
        this.allSelected = e.target.checked;
        this.$root.$emit("selectAll", {
            allSelected: this.allSelected
        });
        }}
    />
</HeadItem>

index.vue

mounted() {
   this.$nextTick(() => {
        this.$root.$on("selectAll", ({ allSelected }) => {
        this.checkSelections = Array(this.sortedData.length).fill(allSelected);
     });
   });
 }

Problem - When I do situation 2 after Situation 1, the same methods don't work as expected. The view isn't updated. Similarly, executing Situation 1 after Situation 2 won't work either.

Here's the link to

Code Link - https://codesandbox.io/s/vmwy3v4203

I'm clueless now after handling all mutations caveats etc.

from Not able to uncheck/check chekboxes on uncheck/check of header checkbox after individual checkboxes are interacted with - Vuejs