Проблемы с использованием Vee-проверки и множественного выбора Vue

#vue.js #vuex #vee-validate #vue-multiselect

Вопрос:

Надеюсь, если кто-то из вас сможет мне помочь, возможно, я что-то не так понимаю, но я просто не могу создать Field компонент для получения выходных данных из многозначного элемента. В мастере Metronic8, который получает поля, введенные с 5 различных шагов, я пытаюсь получить этот

 <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>
 

В данных формы vee-проверки из мастера я объявил группы как массив , который будет доставлен этим полем со значением по умолчанию[].
В функции настройки я определяю эти значения по умолчанию для получения параметров для множественного выбора с помощью действия, отправленного в магазин

     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,
        };
    }
 

и без компонента поля Многозначный выбор работает просто отлично и возвращает массив моих объектов id . Но когда я console.log вывожу данные на кнопку «далее» каждого мастера, массив остается на своем уровне по умолчанию.

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

Я не совсем уверен, как поле получает значения из мультиселекта, поэтому можно ожидать, что группы будут отображаться как пустые в объекте ниже.
Как вы их сочетаете? Есть ли лучший вариант, не меняя слишком много логики? пожалуйста, помогите, и спасибо вам за ваше время!