javascript vue.js vuejs3 vue-multiselect

How to have multiple instances of vue-multiselect with a click of a button

i want to have a vue-multiselect dropwn with a click of add more button

currently i don't know any good approach

Problem/Question: if i add 2 dropdowns, if i select a option same option is selected for other one also, i want to avoid that.

Note: each add more should have its own instance of vue-multiselect

var app = new Vue({
  el: '#app',
  components: { Multiselect: window.VueMultiselect.default },
  data () {
    return {
       value: "",
       options:['Calender','Range','Amount'],
       
       multiselectList:[],
    }
  },
  methods:{
      AddMoreMultiselect(){
         this.multiselectList.push('1 more multiselect'); 
      },
      remove(index){
          this.multiselectList.splice(index,1)
      }
  },
})

#app{
  //margin-top:30px;
}


.items{
    display: flex;
    justify-content: space-between;
}

.multiselect{
    width: 80%;
 }

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-multiselect@2.1.0"></script>
  <link rel="stylesheet" href="https://unpkg.com/vue-multiselect@2.1.0/dist/vue-multiselect.min.css">
  <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
  
  


<div id="app">

   <div><button @click="AddMoreMultiselect()">Add More</button></div>

    <div class="items" v-for="(multiselect,index) in multiselectList" :key="index">
         <multiselect
        v-model="value"
        :options="options"
         :multiple="false"
        :taggable="false"
      ></multiselect>
      <div><button @click="remove(index)">Remove</button></div>
   </div>
</div>

Solution

Define value as an empty array then bind each select to the respective value in that array based on the loop index v-model="value[index]":

var app = new Vue({
  el: '#app',
  components: {
    Multiselect: window.VueMultiselect.default
  },
  data() {
    return {
      value: [],
      options: ['Calender', 'Range', 'Amount'],

      multiselectList: [],
    }
  },
  methods: {
    AddMoreMultiselect() {
      this.multiselectList.push('1 more multiselect');
    },
    remove(index) {
      this.multiselectList.splice(index, 1)
    }
  },
})

#app {
  //margin-top:30px;
}

.items {
  display: flex;
  justify-content: space-between;
}

.multiselect {
  width: 80%;
}

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-multiselect@2.1.0"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-multiselect@2.1.0/dist/vue-multiselect.min.css">
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>




<div id="app">

  <div><button @click="AddMoreMultiselect()">Add More</button></div>

  <div class="items" v-for="(multiselect,index) in multiselectList" :key="index">
    <multiselect v-model="value[index]" :options="options" :multiple="false" :taggable="false"></multiselect>
    <div><button @click="remove(index)">Remove</button></div>
  </div>

</div>