Dynamically add fields to form Vue - vue.js

Question

There is a component in which two select fields (country, city) are created on click.The fields are dependent, when the country is selected, the values in the second select (city) are changed.The problem is that when we change one select (country) all other select-s (cities) change.
<template>
<b-container class="bv-example-row">
<b-row v-for="(station, counter) in stations" v-bind:key="counter">
<b-col cols="6">
<label>Country</label>
<select class='form-control' name="country_dest_id" v-model='station.country' #change='getStates($event)'>
<option value='0' >Select Country</option>
<option v-for='data in countries' :value='data.id'>{{ data.name }}</option>
</select>
</b-col>
<b-col cols="6">
<label >City</label>
<select class='form-control' v-model='station.state'>
<option value='0' >Select State</option>
<option v-for='data in states' :value='data.id'>{{ data.name }}</option>
</select>
</b-col>
<b-col cols="1">
<button class="btn btn-danger remove" #click="deleteStation(counter)"><i class="fa fa-times" aria-hidden="true"></i> Remove</button>
</b-col>
</b-row>
<b-row class="justify-content-md-center">
<b-col cols="3" md="3">
<button class="btn btn-success" type="button" #click="addStation">Add</button>
</b-col>
</b-row>
</b-container>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
},
data(){
return {
stations:[
{
country: '',
state:'',
}
],
countries: [],
states:[]
}
},
methods:{
addStation(){
this.stations.push({
country:'',
state: ''
})
},
deleteStation(counter){
this.stations.splice(counter,1);
},
getCountries: function(){
axios.get('/getCountries')
.then(function (response) {
this.countries = response.data;
}.bind(this));
},
getStates: function(event) {
console.log(event.target.value);
axios.get('/getStates',{
params: {
country_id: event.target.value
}
}).then(function(response){
this.states = response.data;
}.bind(this));
}
},
created: function(){
this.getCountries()
}
}
</script>
How to make field groups unique values?

Answer 1

The problem is that the getStates function works always on the same array in data(). #change overwrites that value & every select that is bound to it receives the new set of values.
You'd be better off if you built up an object of states, something like (the sample probably is not working, just giving an idea):
data() {
return {
states: {
countryId1: ["cid1state1", "cid1state2"],
countryId2: ["cid2state1", "cid2state2"],
},
}
},
methods: {
getStates: function(event) {
if (!(event.target.value in this.states)) {
axios.get('/getStates',{
params: {
country_id: event.target.value
}
}).then(function(response){
this.states[event.target.value] = response.data;
}.bind(this));
}
}
},