Vuejs v-for set unique data - vue.js

Question

I have a component that I can add when I click on the button.
<button type="submit" #click="components ++">add select box</button>
<div v-for="component in components">
<select class="selectpicker form-control" v-model="customized_exercise.name" value={{exercise.id}}>
<option v-for="exercise in exercises">{{ exercise.name }}</option>
</select>
</div>
In this template when I add a couple of them and select a value,all the other components (select box) update with the same value.How can I make them have a unique value?
Vue
import ExerciseSelectbox from './ExerciseSelectbox.vue'
export default {
methods: {
fetchexercises: function(){
this.$http.get('/api/exerciseinstructions').then(function (data) {
this.$set('exercises',data['data'])
})
},
},
comoponents: { ExerciseSelectbox },
data() {
return{
components: 1,
newCustomizedExercise : {
id:'',
name:'',
reps:'',
sets_duration:'',
weight:'',
},
numbers:[100]
}
},
ready() {
this.fetchexercises()
}
}

Answer 1

This is old, but I was also looking for this answer. I found that the Vue documentation mentions this:
Inside v-for blocks we have full access to parent scope properties.
v-for also supports an optional second argument for the index of the
current item.
<ul id="example-2">
<li v-for="(item, index) in items">
{{ parentMessage }} - {{ index }} - {{ item.message }}
</li>
</ul>
So you can use this index parameter to set the id of each element in your loop to keep each one separate.
Or you can set the set your model to a name in the array. Something like v-model="customized_exercise[index].name". But I haven't actually tried this option.
I found another SO answer about how to use v-bind if you want to string concatenate the index variable in a data attribute.
<a v-bind:href="'uniqueName' + index">12312</a>