how can I validate vue 3 typescript multiselect field with zod?

Question

Here is my multiselect component

                     <VField
                        id="unit_type_id"
                        v-slot="{ field }"
                      >
                        <VLabel>Unit Type {{ initialValues.unit_type_id }}</VLabel>
                        <VControl>
                          <Multiselect
                            ref="multiselect"
                            v-model="initialValues.unit_type_id"
                            mode="tags"
                            :searchable="true"
                            :create-tag="false"
                            :close-on-select="false"
                            :options="apartmentUnitTypes"
                            placeholder="Select Unit Type"
                            :attrs="{ field }"
                          ></Multiselect>
                          <p
                            v-if="field?.errorMessage"
                            class="help has-text-danger"
                          >
                            {{ field.errorMessage }}
                          </p>
                        </VControl>
                      </VField>

and here is my zod validation

const zodSchema = z.object({
    unit_type_id: z.string().array().nonempty({
      message: "Please select unit type",
    }),
})

When I submit form then I am getting validation error. But when I fill in selected field even I am getting validation error. How can hide error message after select any value?