Following Vue's documentation:

Checkbox

<input
  type="checkbox"
  v-model="toggle"
  true-value="yes"
  false-value="no" />

true-value and false-value are Vue-specific attributes that only work with v-model. Here the toggle property's value will be set to 'yes' when the box is checked, and set to 'no' when unchecked. You can also bind them to dynamic values using v-bind:

<input
  type="checkbox"
  v-model="toggle"
  :true-value="dynamicTrueValue"
  :false-value="dynamicFalseValue" />

There is a native Vue feature to assign specific strings to a checkbox if it is true or false.

This is especially useful to reduce the necessary code needed to work with tools such as Color-Mode. Where you need to assign a specific string to colorMode.preference to select the desired theme.

We could have this:

<ASwitch v-model="colorMode.preference" true-value="dark" false-value="light" />

Instead of this:

<template>
  <div>
    <ASwitch v-model="themeToggle" />
  </div>
</template>

<script setup>
const colorMode = useColorMode()
const themeToggle = ref(false)

watch(themeToggle, (newValue) => {
	colorMode.preference = newValue ? 'dark' : 'light'
})
</script>

Not to mention that reading the actual value will get the switch to it's correct position. (excluding the 'system' preference)
I'm still quite new to javascript, so I'm not confident enough to open a PR without knowing exactly what files I need to change.
For a small background on how I got to this issue you can read this discussion.