Problems using Vee-Validate's <Field /> and Vue Multiselect

Question

Hoping if some of you can help me, probably I'm gettings things wrong but I just can't make the Field component to get the output from the Multiselect element. In a Metronic8 wizard that receives the Fields input from 5 different steps, I'm trying to get this one

<Field name="groups" v-slot="{ field }">
    <Multiselect v-bind="field" v-model="groups.value" trackBy="groupName" valueProp="id" label="groupName">
    </Multiselect>
</Field>
<ErrorMessage name="groups" class="fv-plugins-message-container invalid-feedback"></ErrorMessage>

In the vee-validate form data from the wizard , I declared groups as an array to be delivered by this Field, with default value[]. In the setup function, I'm defining these default values for getting the options for the Multiselect through an action dispatched to the store

    setup(){
    const groups = ref({
     mode: 'tags',
     value: [],
     options: [],
     searchable: true,
     createTag: true,
    });

    store.dispatch(Actions.GET_GROUPS)
      .then((data) => {
        console.log(data);
        groups.value.options = data;
      })
      .catch(...);

    return {
     groups,
        };
    }

and without the Field component, Multiselect works just fine, and returns an array of my objects id. But when I console.log the output at every wizard's "next" button, the array stays at his default.

{campaignName: "hello, world", groups: Array(0), ... }

I'm not quite sure how Field gets the values from the Multiselect, so it's expectable that groups appears as empty in the object below. How do you combine them? Is there any better option without changing too much logic? please help, and thank you for your time!

Answer 1

This is what you need.

    v-validate data-vv-rules="required" data-vv-name="form.corporate.id"

This works for me.

<multiselect
    v-validate data-vv-rules="required" data-vv-name="form.corporate.id"
    v-model="form.corporate"
    :options="corporates"
    :multiple="false"
    :allow-empty="false"
    track-by="id"
    label="title"
    placeholder="">
</multiselect>
<div v-if="errors.has('form.corporate.id')" class="form-control-feedback form-text" v-cloak>@{{ errors.first('form.corporate.id') }}</div>