TriStateCheckbox.vue

<script setup lang="ts">

import {ref, watch} from "vue";

const props = defineProps<{
    modelValue?: boolean | undefined
}>();

const emit = defineEmits<{
    (event: 'update:modelValue', value: boolean|undefined): void
}>();

const currentValue = ref<boolean|undefined>(props.modelValue);

watch(
    () => props.modelValue,
    (newValue) => currentValue.value = newValue,
    { immediate: true }
);

const toggleState = () => {
    console.log("ToggleState()", currentValue.value);
    currentValue.value = currentValue.value === false ? true : false;
    emit("update:modelValue", currentValue.value);
}
</script>

<template>
    <input
        type="checkbox"
        :checked="currentValue === true"
        :indeterminate="typeof currentValue === 'undefined'"
        class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
        @change.prevent="toggleState" />
</template>