I'm trying out HeadlessUI, Tailwind 2, and VueJS v3. Why do I have to click on the HeadlessUI SwitchLabel, before the Switch component appears?

Question

I'm trying out HeadlessUI v1.0, Tailwind v2.2, & VueJS v3 (so cutting edge, I know). But why do I have to click on the SwitchLabel, before the Switch component appears?

Once the Switch appears, both states appear/function normally.

Is there something about the Switch component that I'm missing?

CLUE: On the first run, I see that the (Headless-UI) Switch component (created from an HTML button), contains NO classes yet.

Switch component from Chrome Dev (on the first run):

<div class="flex justify-between items-center max-w-sm mx-auto">
    <label id="headlessui-label-1" class="mr-4">Enable notifications</label>
    <button class="" modelvalue="false" id="headlessui-switch-2" role="switch" tabindex="0" type="button" >
        <span class="translate-x-1 inline-block w-4 h-4 transition-transform transform bg-white rounded-full"></span>
    </button>
</div>

App.vue

  <img class="mx-auto" width="100" height="100" alt="Vue logo" src="./assets/logo.png" />

  <HelloWorld msg="HELLO V3 WORLD!" />

  <div class="mt-5 p-5">
    <EnableNotifications />
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import HelloWorld from './components/HelloWorld.vue'
import EnableNotifications from './components/EnableNotifications.vue'

export default defineComponent({
  name: 'App',
  components: {
    HelloWorld,
    EnableNotifications,
  }
})
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

EnableNotifications.vue

<template>
  <SwitchGroup>
    <div class="flex justify-between items-center max-w-sm mx-auto">
      <SwitchLabel class="mr-4">Enable notifications</SwitchLabel>
      <Switch
        v-model="enabled"
        :class='enabled ? "bg-blue-600" : "bg-gray-200"'
        class="relative inline-flex items-center h-6 transition-colors rounded-full w-11 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
      >
        <span
          :class='enabled ? "translate-x-6" : "translate-x-1"'
          class="inline-block w-4 h-4 transition-transform transform bg-white rounded-full"
        />
      </Switch>
    </div>
  </SwitchGroup>
</template>

<script>
  import { ref } from 'vue'
  import { Switch, SwitchGroup, SwitchLabel } from '@headlessui/vue'

  export default {
    components: { Switch, SwitchGroup, SwitchLabel },

    setup() {
      const enabled = ref(false)

      return { enabled }
    },
  }
</script>```

Answer 1

It just got fixed! Upgrade HeadlessUI to version v1.3. (I WAS using v1.2)