Multiselect no Vue 2

Apertei enter sem querer, continuando...


Multiselect que estou utilizando: https://vue-multiselect.js.org/

Estou utilizando Laravel 9 e Vue 2. Ao abrir o modal para editar ou cadastrar dados de um multiselect, não estou conseguindo inserir os dados já cadastrados da API, os dados estão sendo retornados normal pela API, mas na hora que insiro no componente do Vue não está sendo exibido no multiselect. Segue o código:

data() {

    return {

      value: this.$store.state.permissions.permissionSelected.data, // dessa forma não funciona

      // value: [ { "id": 2, "uuid": "d266e7fd-37ef-45f7-ba66-6dfd88b1f380", "name": "operador", "description": null } ], // o retorno dos dados computados do exemplo de cima, retorna dessa forma, quando eu insiro esse valor direto aqui nessa propriedade (value) ai funciona

      options: [],

    };

  },


Acredito que deve ser o tipo de retorno que tenho que tratar.

Olá, Wesley!
Tudo bem?

Tem o projeto no GitHub?

Tem algum erro no console? Se sim, qual?
Me dê mais detalhes por favor;

Consegui resolver assim:

Reparei que não posso usar v-model="value" no component <multiselect>.

Em vez de v-model eu coloquei :value="this.$store.state.permissions.permissionSelected.data"

E acrescentei @input="updateValueAction"

Ficou assim:

<multiselect

          selectLabel="Adicionar"

          deselect-label="Remover"

          selectedLabel="Selecionado"

          :value="this.$store.state.permissions.permissionSelected.data"

          :options="listPermissions"

          @input="updateValueAction"

          :multiple="true"

          :close-on-select="false"

          :clear-on-select="false"

          :preserve-search="true"

          placeholder="Selecione"

          label="name"

          track-by="name"

        >

          <template slot="selection" slot-scope="{ values, search, isOpen }"

            ><span

              class="multiselect__single"

              v-if="values.length &amp;&amp; !isOpen"

              >{{ values.length }} opção selecionado</span

            ></template

          >

        </multiselect>

methods: {

updateValueAction(value) {

      var dataValue = {

        data: [],

      };

      dataValue.data = value;

      this.$store.commit("LOAD_SELECTED_PERMISSIONS", dataValue);

    },

},