<div id="app">
<multiselect
  tag-placeholder="Add this as new tag"
  placeholder="Добавьте доступ"
  label="name"
  :options="value"
  :multiple="true"
  :taggable="true"
  track-by="access_num"
  @tag="addTag(entity, $event)"
  :select-label="'Выберите'"
  :selected-label="'Выбрано'"
  :deselect-label="'Нажмите Enter, чтобы убрать'"
             
  :model-value="entity.selectedAccesses"
  @update:model-value="updateSelected(entity, $event)"


>
</multiselect>
</div>

const { Multiselect } = window['vue-multiselect'];
const { createApp } = Vue;

createApp({
  components: { Multiselect },
  data () {
    return {
      entity: {
        selectedAccesses: [],
      },
      value: [
        { access_num: 1, name: 'default' }
      ]
    }
  },
  methods: {
    addTag(entity, newTag) {
      const tag = {
        name: newTag,
        access_num: this.value.length + 1, // Генерируем новый access_num
      };
      this.updateSelected(entity, [...entity.selectedAccesses, tag]);
      this.value.push(tag);
    },
    updateSelected(entity, newValue) {
      const previosValue = entity.selectedAccesses;
      entity.selectedAccesses = newValue;
    }
  }
})
  .mount('#app');