tags not visibly deleted

[atefrihane]

Hey guys, I'm using this component in order to add zipcodes for a specific city.. so I'm looping through an array of cities with includes a nested array of zipcodes.. The problem is for instance when I add 2 cities with a specific tag for each one, whenever I delete the first city its related tags keep being displayed in the second row.. when I tried to log the data , I found that it's correctly removed but visibly not..

this is my code ..

<tr v-for="city in cities">
                        <td>
                            <input type="text" class="form-control" placeholder="Ville" v-model="city.name"
                                style="height:42px;">
                        </td>
                        <td style="width:60%;">
                            <div class="">

                                <vue-tags-input class="tags-input" :allow-edit-tags="true" v-model="city.zipcode"
                                    :city.zipcodes="city.zipcodes" @tags-changed="newTags => city.zipcodes = newTags" placeholder="Ajouter un code" />


                            </div>
                        </td>
                        <td>

                            <button type="button" class="btn btn-default" style="margin-top:4px;"
                                @click="removeCity(city)"><i class="fa fa-minus"></i></button>
                        </td>
                    </tr>

this is the function that removes a single city..

 removeCity(city) {
        
  this.cities.splice(this.cities.indexOf(city), 1);

 },

I hope it's clear..