How can I create my own unique v-model for each v-select on the page?

Question

JavaScript

I display such multiselect menus on my page

<template v-slot:item.people="{ item }">
 <v-select
 @input="onInput"
 :items="people"
 v-model="selected"
 item-text="name"
 item-value="surname"
 label="Select"
 return-object
 multiple
></v-select>
</template>

data: {
    // Модель доступных для выбора элементов.
    people: [{
      name: "Adam",
      surname: "Brown",
    }, {
      name: "Bruce",
      surname: "Lee",
    }, {
      name: "Erl",
      surname: "Black",
    }],

    // Модель выбранных элементов.
    selected: [],
  },

But when I select one item in any menu, it is selected in all the others. Since they have a common v-model. How can I fix this?

Answer 1

data: () => ({
  people: [{
    name: "Adam",
    surname: "Brown",
  }, {
    name: "Bruce",
    surname: "Lee",
  }, {
    name: "Erl",
    surname: "Black",
  }],
  selected: {}
}),
created () {
  this.setModel()
},
methods: {
  setModel () {
    this.people.forEach((user, index) => {
      this.$set(this.selected, `user${index}`, '')
    })
  }
}

A model like this will appear.

selected: {
user1: '',
user2: '',
user3: '',
//...
}

v-model="selected[`user${index}`]" // если в цикле выводить селекты
v-model="selected.user1" // если просто ручками