Form errors add field name in 5.0.0-beta with zod

[dalugm]

What happened?

For example we have the following two schemas

const addressSchema = z.object({
  country: z.string().nonempty('Country is required'),
  streetLine1: z.string().nonempty('Street Line 1 is required'),
  streetLine2: z.string().optional(),
  city: z.string().nonempty('City is required'),
  state: z.string().optional(),
  zipcode: z.string().regex(/^(?=.*\d)[a-z\d][a-z\d \-]{1,8}[a-z\d]$/i, 'Zip code is required'),
})

const operatingAddressSchema = z
  .object({
    address: addressSchema,
    isPrimary: z.stringbool(),
  })
  .array()
  .nonempty()
type OperatingAddress = z.infer<typeof operatingAddressSchema>

In vee-validate v4, when address is not correct, the form errors will be like

{
    "operatingAddresses[0].address": "Zip code is required"
}

But in vee-validate v5.0.0-beta, it will be

{
    "operatingAddresses[0].address.country": "Country is required",
    "operatingAddresses[0].address.zipcode": "Zip code is required"
}

When used with shadcn-vue's FormMessage, it will not match the exact error.

Here the field.name is operatingAddresses[0].address, while error field name is operatingAddresses[0].address.country.

<FormMessage
  v-if="showErrors"
  :message="form.errors.value[field.name]"
/>

How can I fix this? thx in advance

Reproduction steps

...

Version

Vue.js 3.x and vee-validate 4.x

What browsers are you seeing the problem on?

• Firefox
• Chrome
• Safari
• Microsoft Edge

Relevant log output

Demo link

no demo yet

Code of Conduct

• I agree to follow this project's Code of Conduct