How to check a checkbox in a nested component through its incoming $event.target?

Question

Vue.js

Has a parent:

<CheckboxComponent
  v-model="myDatas"
  :value="1"
  @click="onCheckbox($event)"
>
// В нем метод:
onCheckbox($event) {
  // Тут проверки, если сняты все чекбыксы, то включить последний снятый
  $event.target.checked = true;
    
},

In the CheckboxComponent

<input
  :value="value"
  :checked="isChecked"
  type="checkbox"
  @click="handleClick($event)"
>
// И тут есть метод:
handleClick($event) {
  this.$emit('click', $event);
}

$event comes to the parent, everything is ok.
But I have a lot of such checkboxes in the parent, I want to make a check. To prevent the last checkbox from being removed.
For example, so that any one would always be included. And it was impossible to remove everything.
I try to make a check on click in the parent and if all checkboxes are cleared
Then include the last one removed via $event.target.checked = true. But from Parent

Answer 1

You don't need to set checked directly, that's not how vue does things.

prevent unchecking the last checkbox

Add the -disabled parameter to your component. In the parent, make a method to calculate its value: if the checkbox is selected and the number of selected checkboxes is equal to one - true, otherwise false. For example .

Answer 2

No need to drive the state back and forth, just do it:
But in general - all the data obviously needs to be changed through the model, and not in a roundabout way.