nuxt ui with zod-validation

 const formData = ref({
  email: "",
  address: {
    firstName: "",
    lastName: "",
    street: "",
    addressDetails: "",
    city: "",
    country: "",
    postalcode: "",
  }
});
const schema = z.object({
  email: z
    .string()
    .min(1, { message: "E-Mail is required" })
    .email("Invalid email"),
  address: z.object({
    firstName: z.string().min(1, { message: "First Name is required" }),
    sameBillingAddress: z.enum(["true", "false"]).array(),
    lastName: z.string().min(1, { message: "Last Name is required" }),
    street: z.string().min(1, { message: "Street is required" }),
    city: z.string().min(1, { message: "City is required" }),
    country: z.string().min(1, { message: "Country is required" }),
    postalcode: z.string().min(1, { message: "Postalcode is required" }),
  }),
  shipping: z.enum(["standard", "express"], {
    errorMap: () => ({ message: "Shipping is required" }),
  }),
  });

<div class="flex-1 flex flex-col gap-10">
  <UForm
    :state="formData"
    :schema="schema"
    class="space-y-8 w-full flex flex-col"
    @submit="onSubmit"
  >
    <checkoutAccount v-model="formData.email" />
    <formsAddress
      v-model:firstName="formData.address.firstName"
      v-model:lastName="formData.address.lastName"
      v-model:street="formData.address.street"
      v-model:addressDetails="formData.address.addressDetails"
      v-model:city="formData.address.city"
      v-model:postalcode="formData.address.postalcode"
      v-model:country="formData.address.country"
    />