vue-select allowing multiple duplicates

Question

I'm dynamically creating vue-select dropdown lists that allow multiple selection. But these dropdown lists are allowing the same option being chosen. How can I change this behaviour without using v-model (since I'm creating these lists dynamically)?

Options:

 "categories": [
    {
      "id": 1,
      "name": "Math",
      "years": [
        { "id": 14, "name": "4" },
        { "id": 15, "name": "5" },
        { "id": 16, "name": "6" }
      ]
    },
    {
      "id": 2,
      "name": "Science",
      "years": [
        { "id": 11, "name": "1" },
        { "id": 12, "name": "2" },
        { "id": 13, "name": "3" }
      ]
    }
  ]

HTML:

  <div
    v-for="category in categories">
    <label>{{category.name}}</label>
    <vue-select
      :options="category.years"
      label="name"
      @input="onCategoryYearSelect"
      multiple>
    </vue-select>
  </div>

Answer 1

First off you should define data property, where you will store you selected years.

It will be an object, which keys will be categories id's, and values will be selected years.

Then you should handle <vue-select> @input event, to set selected year to appropriate category.

Vue.component('vue-select', VueSelect.VueSelect)

new Vue({
  el: "#app",
  data() {
    return {
      "selectedYears": {},
      "categories": [{
          "id": 1,
          "name": "Math",
          "years": [{
              "id": 14,
              "name": "4"
            },
            {
              "id": 15,
              "name": "5"
            },
            {
              "id": 16,
              "name": "6"
            }
          ]
        },
        {
          "id": 2,
          "name": "Science",
          "years": [{
              "id": 11,
              "name": "1"
            },
            {
              "id": 12,
              "name": "2"
            },
            {
              "id": 13,
              "name": "3"
            }
          ]
        }
      ]
    }
  },
   methods: {
    inputHandler(id, e) {
      if (this.selectedYears[id] && this.selectedYears[id].find(item => item.id === e.id)) return;
      
      this.$set(this.selectedYears, id, e);
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/vue-select@latest"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-select@latest/dist/vue-select.css">
<div id="app">
  <div>
    <div v-for="category in categories" :key="category.id">
      <label>{{ category.name }}</label>
      <vue-select :options="category.years" label="name" multiple @input="inputHandler(category.id, $event)">
      </vue-select>
    </div>
    <h1>{{ selectedYears }}</h1>
  </div>
</div>