Get initial value in custom component

[fullbl]

Hello, I'm trying to create my custom components for a form which is using vee-validate.
I'm able to render a checkbox in this way:

<Checkbox
        name="conf.enable"
        title="Enable this"
 />

with this setup in component:

setup(props) {
    const { checked, handleChange } = useField(props.name, undefined, {
      type: "checkbox",
      checkedValue: true,
      uncheckedValue: false,
    });

    return {
      checked,
      handleChange,
      value: ref(false),
    };
  },

I followed the guide to create the component, but I would like to know if it's possible from the component to access the form values, since the name (conf.enable) is a string I would prefer to take the value from form data instead of passing the value for every single checkbox.

[fullbl]

seems I was able to solve it myself (still not sure on when the data is passed). This is my switch component!

<template>
  <div>
    <label class="relative flex items-center mb-4 cursor-pointer">
      <div
        class="
          h-6
          bg-gray-200
          border-2 border-gray-200
          rounded-full
          toggle-bg
          w-11
        "
        v-if="disabled"
      ></div>
      <Switch
        v-model="value"
        :class="[
          checked ? 'bg-indigo-600' : 'bg-gray-200',
          'relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 mr-2',
        ]"
      >
        <span
          aria-hidden="true"
          :class="[
            checked ? 'translate-x-5' : 'translate-x-0',
            'pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200',
          ]"
        />
      </Switch>

      <span class="ml-3 text-sm font-medium text-gray-900">{{ title }}</span>
      <slot></slot>
    </label>
    <error-message :name="name" class="mt-2 text-sm text-red-600" />
  </div>
</template>

<script>
import { Field, ErrorMessage, useField, useForm } from "vee-validate";
import { Switch } from "@headlessui/vue";

export default {
  components: { Field, ErrorMessage, Switch },

  props: {
    name: {
      type: String,
      required: true,
    },
    title: {
      type: String,
      required: true,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    value: {
      get() {
        return this.checked
      },
      set(val) {
        this.handleChange(val)
      }
    }
  },

  setup(props) {
    const { checked, handleChange } = useField(props.name, undefined, {
      type: "checkbox",
      checkedValue: true,
      uncheckedValue: false,
      initialValue: props.value,
    });

    return {
      checked,
      handleChange,
    };
  },
};
</script>