Switch set to checked in vue js

[cezarneaga]

new to vue so this might be silly.
if i want to call the Switch with enabled set to true how do i do it.
i have a BaseSwitch with the default code suggested.

<template>
  <Switch
    v-model="enabled"
    :class="enabled ? 'bg-teal-900' : 'bg-teal-700'"
    class="relative inline-flex items-center h-6 rounded-full w-11"
  >
    <span class="sr-only">Enable notifications</span>
    <span
      :class="enabled ? 'translate-x-6' : 'translate-x-1'"
      class="inline-block w-4 h-4 transform bg-white rounded-full"
    />
  </Switch>
</template>

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

  export default {
    components: { Switch },

    setup() {
      const enabled = ref(false)

      return { enabled }
    },
  }
</script>

using is as the ref says false
i would like to be able to use or something similar to have the toggle set to true.

how would i go about that?
thanks a lot

[RobinMalfait]

The false in your setup function:

const enabled = ref(false)

is the default to this enabled prop. If you just want it to be true always, you should be able to change false to true.

[cezarneaga]

yes but i want to make the component reusable. setting this to true: const enabled = ref(true) seems like hardcoding the value

[cezarneaga]

nvm, I set the ref to a prop instead of false/true