How do I limit amount of boxes the user can check when using ion-checkbox? (Vue)

Hi, I am trying to limit the amount of checked boxes the user can input. Here is my code:

      <ion-item v-for="category in randomCategories" v-bind:key="category">
        <ion-label color="light">{{category.val}}</ion-label>
        <ion-checkbox
          @update:modelValue="category.isChecked = $event"
          :modelValue="category.isChecked" (ionChange)="onChange($event)" >
        </ion-checkbox>
      </ion-item>

Currently, the user gets presented with 5 options, of which they should only be able to select 3 total. How do I make this happen? If they have already chosen 3, they need to uncheck one to select a different one. Any help is greatly appreciated.

it would be helpful if you provided a small sample since it appears you are writing a component that is receiving a model from its parent that needs to be updated. You can create a project quickly in codesandbox

Use checkbox ‘disabled’ property and count amount of isChecked properties equal of true.

Where would I listen to how many checkboxes are checked?

inside randomCategories

	const canCheck = computed(() => {
		let chkCnt = 0;
		randomCategories.value.forEach(function(item){
			chkCnt+= item.isChecked ? 1 : 0;
		});
		return chkCnt < 3 ? true : false;
	});

or set variable with checked count which update by checkbox click