How can I update a Shadcn Stepper component with preloaded API data using Vue.js?

I'm trying to preload existing data fetched from an API into a Shadcn Stepper component using Vee Validate, but the form fields aren't updating as expected.

Below is the stepper component code for reference:

HTMLCopied
<div class="relative mt-0 md:mt-0">
        <div class="rounded-lg border bg-card p-6 text-card-foreground shadow-sm">
          <Form
            v-slot="{ meta, values, validate, errors }"
            :validation-schema="toTypedSchema(formSchema[stepIndex - 1])"
          >
            <form @submit="async (e) => {
              e.preventDefault()
              await validate()

              if (stepIndex === steps.length && meta.valid) {
                onSubmit(values)
              }
            }">
              <component 
                :is="currentStepComponent"
                :errors="errors"
              />

              <div class="flex items-center justify-between mt-6">
                <Button
                  type="button"
                  variant="outline"
                  :disabled="stepIndex === 1"
                  @click="handleBack"
                >
                  {{ t('back', 'Back') }}
                </Button>
                
                <div class="flex items-center gap-3">
                  <Button 
                    v-if="stepIndex !== steps.length"
                    :type="meta.valid ? 'button' : 'submit'"
                    :disabled="!meta.valid || isSubmitting"
                    @click="meta.valid && handleNext(values)"
                  >
                    {{ t('continue', 'Continue') }}
                  </Button>
                  <Button
                    v-if="stepIndex === steps.length"
                    type="submit"
                    :disabled="!meta.valid || isSubmitting"
                  >
                    {{ t('submit', 'Submit') }}
                  </Button>
                </div>
              </div>
            </form>
          </Form>
        </div>
      </div>

<script setup lang="ts">
import { Form } from '@v5/components/ui/form'
import { useForm } from 'vee-validate'
import { toTypedSchema } from '@vee-validate/zod'
import * as z from 'zod'
import { Stepper, StepperItem, StepperSeparator, StepperTitle } from '@v5/components/ui/stepper'


const formSchema = [
  z.object({
    name: z.string().min(1, { message: t('nameRequired', 'Name is required') }),
    abbreviation: z.string()
      .min(1, { message: t('abbreviationRequired', 'Abbreviation is required') })
      .superRefine(async (value, ctx) => {
        if (!value) return

        isCheckingAbbreviation.value = true
        try {
          const response = await axios.post('/sites/validate-site-abbreviation', {
            input_site_abbr_name: value
          })
          const exists = response.data.is_site_abbreviation_exist
          if (exists) {
            ctx.addIssue({
              code: z.ZodIssueCode.custom,
              message: t('abbreviationAlreadyExist', 'Abbreviation already exists')
            })
          }
        } catch (error) {
          ctx.addIssue({
            code: z.ZodIssueCode.custom,
            message: t('validationError', 'Error validating abbreviation')
          })
        } finally {
          isCheckingAbbreviation.value = false
        }
      })
  }),
  z.object({
    hospital_type: z.string().min(1, { message: t('hospitalTypeRequired', 'Hospital type is required') }),
    intended_use: z.array(z.string()).min(1, { message: t('intendedUseRequired', 'At least one intended use is required') }),
    intended_use_comments: z.string().optional()
  }),
  z.object({
    address_line1: z.string().min(1, { message: t('addressRequired', 'Address is required') }),
    address_line2: z.string().optional(),
    city: z.string().min(1, { message: t('cityRequired', 'City is required') }),
    county: z.string().min(1, { message: t('countyRequired', 'County is required') }),
    timezone_id: z.number({ required_error: t('timezoneRequired', 'Timezone is required') }).nullable()
  }),
  z.object({
    notes: z.string().optional()
  })
]

const steps = [
  {
    step: 1,
    title: t('Site Name'),
    component: Step1
  },
  {
    step: 2,
    title: t('Hospital type, funding & intended use'),
    component: Step2
  },
  {
    step: 3,
    title: t('Address Details'),
    component: Step3
  },
  {
    step: 4,
    title: t('Application notes'),
    component: Step4
  }
]

interface FormData {
  name: string;
  abbreviation: string;
  hospital_type: string;
  hospital_funding: string;
  intended_use_comments: string;
  intended_use: string[];
  protocol_id: string;
  address_line1: string;
  address_line2: string;
  city: string;
  county: string;
  timezone_id: number | null;
  notes: string;
}

const formData = ref({
    name: '',
    abbreviation: '',
    hospital_type: '',
    hospital_funding: '',
    intended_use_comments: '',
    intended_use: [],
    protocol_id: '',
    address_line1: '',
    address_line2: '',
    city: '',
    county: '',
    timezone_id: null,
    notes: ''
  });

const { setValues  } = useForm<FormData>({
  validationSchema: computed(() => toTypedSchema(formSchema[stepIndex.value - 1])),
})

const loadSiteApplicationDetail = async () => {
  try {
    if (!props.id) return
    
    const response = await axios.get(`site-application/${props.id}`)
    const siteApplication = response.data.data
    
    if (['created', 'rejected', 'submitted', 'in-review'].includes(siteApplication.status)) {
      return invalidLink()
    }

    formData.value = {
      name: siteApplication.name || '',
      abbreviation: siteApplication.abbreviation || '',
      hospital_type: siteApplication.hospital_type || '',
      hospital_funding: siteApplication.hospital_funding || '',
      intended_use_comments: siteApplication.intended_use_comments || '',
      intended_use: siteApplication.intended_use || [],
      protocol_id: siteApplication.protocol_id || '',
      address_line1: siteApplication.address_line1 || '',
      address_line2: siteApplication.address_line2 || '',
      city: siteApplication.city || '',
      county: siteApplication.county || '',
      timezone_id: siteApplication.timezone_id || null,
      notes: siteApplication.notes || ''
    }

    // Set initial form values
    setValues(formData.value)

    siteApplicationId.value = siteApplication.id

    if (siteApplication.country_id || siteApplication.state_id) {
      siteStore.setSelectedLocation(
        siteApplication.country_id,
        siteApplication.state_id
      )
    }
  } catch (error) {
    invalidLink()
  }
}

</script>

The goal is to update the form's values correctly within the stepper component. For context, here is the code for Step 1 where data is bound:

HTMLCopied
<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import { FormControl, FormField, FormItem, FormLabel, FormMessage } from '@v5/components/ui/form'
import { Input } from '@v5/components/ui/input'

interface Props {
  isCheckingAbbreviation?: boolean
  errors?: Record<string, string>
}

defineProps<Props>()
const { t } = useI18n()
</script>

<template>
  <div class="space-y-6">
    <div class="space-y-4">
      <h2 class="text-xl font-semibold">{{ t('Site Name') }}</h2>

      <div class="grid gap-6 md:grid-cols-2">
        <FormField v-slot="{ componentField, errorMessage }" name="name">
          <FormItem>
            <FormLabel class="required">{{ t('hospitalName') }}</FormLabel>
            <FormControl>
              <Input
                v-bind="componentField"
                type="text"
                :placeholder="t('hospitalName', 'Hospital name')"
                :class="{ 'border-destructive': errorMessage }"
              />
            </FormControl>
            <FormMessage>{{ errorMessage }}</FormMessage>
          </FormItem>
        </FormField>

        <FormField v-slot="{ componentField, errorMessage }" name="abbreviation">
          <FormItem>
            <FormLabel class="required">{{ t('hospitalAbbr', 'Hospital abbreviation') }}</FormLabel>
            <FormControl>
              <Input
                v-bind="componentField"
                type="text"
                :placeholder="t('abbreviation', 'Abbreviation')"
                :class="{ 'border-destructive': errorMessage }"
              />
            </FormControl>
            <FormMessage>{{ errorMessage }}</FormMessage>
          </FormItem>
        </FormField>
      </div>
    </div>
  </div>
</template>

<style scoped>
.required:after {
  content: '*';
  color: rgb(var(--color-destructive));
  margin-left: 2px;
}
</style>

Any insights or solutions to ensure that the API-loaded data properly binds to the stepper component would be appreciated.