[Vuejs]-V-Model returns undefined

Use modelValue prop to pass v-model from the parent and @change event to properly upate the model value. Also use the checked property of the checkbox type input for the value propagation.

See Demo

Solution with minimal code:

// ToggleInput.vue
<template>
    <label>
        {{ toggleBtnDigitizePolygonLabel }}
        <input type="checkbox" :value="modelValue"
            :disabled="isToggleBtnDigitizePolygonDisabled"
            @change="$emit('update:modelValue', $event.target.checked)"
            :checked="modelValue"
        >
    </label>
</template>

<script>
export default {
    props: {
        modelValue: {
            type: Boolean,
            default: false,
        },
        toggleBtnDigitizePolygonLabel: {
            type: String,
            default: "Default Label"
        },
        isToggleBtnDigitizePolygonDisabled: {
            type: Boolean,
            default: false,
        },
    },
};
</script>

And the usage as:

// Parent.vue
<script setup>
import { ref, watch } from 'vue';
import ToggleButton from './ToggleInput.vue';
const toggle1 = ref(false)
const toggle2 = ref(true)
</script>

<template>
  <main>
    <ToggleButton v-model="toggle1" />
    {{ toggle1 }}
    <br>
    <ToggleButton v-model="toggle2" toggleBtnDigitizePolygonLabel="Checked Label" />
    {{ toggle2 }}
  </main>
</template>