Does vee-validate work with third-party UI components, e.g. of Primevue? - validation

Question

I am using vee-validate v4.0, vue's (v3) components with TypeScript and UI components from Primevue and Ionic. Validation on simple input fields works fine:
<template>
...
<Field
v-slot="{ field }"
v-model="username"
:rules="isRequired"
name="username"
>
<IonInput
v-bind="field"
type="text"
/>
</Field>
<ErrorMessage
name="username"
class="error"
/>
...
</template>
<script lang="ts">
...
methods: {
isRequired (value: string) {
if (!value) {
return 'This field is required'
}
return true
}
}
...
</script>
Applying the same to Primevue's Dropdown element fails:
<Field
v-slot="{ field }"
v-model="campaign"
name="campaign"
:rules="isRequired"
>
<Dropdown
:options="campaigns"
option-value="id"
option-label="name"
placeholder="Choose a campaign"
v-bind="field"
/>
</Field>
<ErrorMessage
name="campaign"
class="error"
/>
Validation works as expected, but opening the Dropdown leads to error messages:
Do you know how this can be solved? Is there an example how vee-validate works with more complex fields like dropdown or multiselect elements?

Answer 1

This can be solved by listening on the input/change events and passing data between <Field> and (in this special case Primevue's) <Dropdown> as follows:
<Form v-slot="{ errors }" #submit="saveAndProceed()">
...
<Field
v-slot="{ field }"
v-model="campaign"
name="campaign"
value="value"
:rules="isRequired"
>
<Dropdown
:options="campaigns"
option-value="id"
option-label="name"
placeholder="Choose a campaign"
:model-value="field.value"
:class="{ 'p-invalid': errors.campaign }"
#input="field.onInput.forEach((fn) => fn($event.value))"
#change="field.onChange.forEach((fn) => fn($event.value))"
/>
<ErrorMessage
name="campaign"
class="error"
/>
</Field>
...
</Form>
Compare also with the following references for other events (onBlur etc.):
Vee-validate's Field reference
E.g., Primevue's Dropdown events

Answer 2

You need to add #update:modelValue="handleChange" to your dropdown:
<Field
v-slot="{ field, handleChange }"
v-model="campaign"
name="campaign"
:rules="isRequired"
>
<Dropdown
:options="campaigns"
option-value="id"
option-label="name"
placeholder="Choose a campaign"
v-bind="field"
#update:modelValue="handleChange"
/>
</Field>
<ErrorMessage
name="campaign"
class="error"
/>

Answer 3

<div class="col-6">
<Field
v-slot="{ field,handleChange }"
v-model="brand_name"
name="brand_name"
>
<div class="p-col-6">
<div class="p-inputgroup">
<Dropdown
:options="brands"
optionLabel="name"
optionValue="code"
:model-value="field.value"
placeholder="Select car brand"
#update:modelValue="handleChange"
/>
</div>
</div>
</Field>
</div>