Using switch component with daisyUI

[amir20]

I am trying to use DaisyUI toggle with <Switch /> but I am a little stumped why the state is not changing.

Here is my code

<Switch v-model="enabled" as="label" class="label cursor-pointer" v-slot="{ checked }">
        Enable notifications
        <input type="checkbox" class="toggle" :checked="checked" />
      </Switch>

The value never gets checked.

If I don't use headlessUI and just write my component, it works just fine.

  <label class="label cursor-pointer">
    Accept terms of use
    <input type="checkbox" class="toggle" :checked="enabled" @click="enabled = !enabled" />
  </label>

I have added console.log(enabled) and on both example the values are logged.

It doesn't make sense why this is not working. If I use aria-checked then it does work. I also tried v-model on checkbox, with no luck.

Here is a video of what I mean not working.

Screen.Recording.2023-09-05.at.11.10.40.AM.mov