Remove Chips from Vuetify Multi Select in v-for loop - vue.js

Question

I'm using vuetify v.2 and creating some multi select via v-for.
everything is ok except removing chips. When I try to remove form any select, it removes from the last one. It got something to do with index of removed item as defined in remove method. Looks like all items get index of the last select.
Here is my code:
<template>
<v-row class="ma-0">
<v-col cols="12" sm="12" md="6" class="px-1" v-for="attribute in allAttr" :key="attribute.id">
<v-select
v-model="attrArr"
:items="attribute.items"
item-text="title"
item-value="id"
chips
:label="attribute.title"
multiple
outlined
#change="changed()"
>
<template v-slot:selection="{ attrs, item, select, selected }">
<v-chip
v-bind="attrs"
:input-value="selected"
close
#click="select"
#click:close="remove(item)"
>
<strong>{{ item.title }}</strong>
</v-chip>
</template>
</v-select>
</v-col>
{{attrArr}}
</v-row>
</template>
<script>
export default {
data(){
return{
attrArr:[],
allAttr: null
}
},
async fetch(){
// fetch all attributes
//this.allAttr = await this.axiosGet(`attributes/0/1`)
this.allAttr = [
{
id: 1,
title: "color",
items:[
{
id: 11,
title: "blue"
},
{
id: 12,
title: "green"
},
{
id: 13,
title: "black"
}
]
},
{
id: 2,
title: "size",
items:[
{
id: 21,
title: "L"
},
{
id: 22,
title: "S"
}
]
},
{
id: 3,
title: "Material",
items:[
{
id: 31,
title: "X01"
},
{
id: 32,
title: "X02"
},
{
id: 33,
title: "X03"
},
{
id: 34,
title: "X04"
}
]
}
]
},
methods: {
remove (item) {
this.attrArr.splice(this.attrArr.indexOf(item), 1)
this.attrArr = [...this.attrArr]
},
changed(){
this.$emit('changed', this.attrArr)
}
},
}
</script>

Answer 1

You can just pass in the id instead of the entire item object...
<v-chip
v-bind="attrs"
:input-value="selected"
close
#click="select"
#click:close="remove(item.id)">
<strong>{{ item.title }}</strong>
</v-chip>
...
remove (id) {
let idx = this.attrArr.indexOf(id)
this.attrArr.splice(idx, 1)
this.attrArr = [...this.attrArr]
},
Demo: https://codeply.com/p/Cb5TYCS6Bt

Answer 2

in your remove method you're looking for the index of an object within attrArr which consists of ids only. Try this instead:
this.attrArr.splice(this.attrArr.indexOf(item.id), 1)