title: Remove Chips from Vuetify Multi Select in v-for loop
body: <p>I'm using <code>vuetify v.2</code> and creating some <code>multi select</code> via <code>v-for</code>.
  everything is ok except removing <code>chips</code>. When I try to remove form any <code>select</code>, it removes from the last one. It got something to do with <code>index</code> of removed <code>item</code> as defined in <code>remove</code> method. Looks like all <code>items</code> get <code>index</code> of the last <code>select</code>.</p>
  <p>Here is my code:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
  &lt;v-row class=&quot;ma-0&quot;&gt;
      &lt;v-col cols=&quot;12&quot; sm=&quot;12&quot; md=&quot;6&quot; class=&quot;px-1&quot; v-for=&quot;attribute in allAttr&quot; :key=&quot;attribute.id&quot;&gt;
          &lt;v-select
              v-model=&quot;attrArr&quot;
              :items=&quot;attribute.items&quot;
              item-text=&quot;title&quot;
              item-value=&quot;id&quot;
              chips
              :label=&quot;attribute.title&quot;
              multiple
              outlined
              @change=&quot;changed()&quot;
          &gt;
              &lt;template v-slot:selection=&quot;{ attrs, item, select, selected }&quot;&gt;
              &lt;v-chip
                  v-bind=&quot;attrs&quot;
                  :input-value=&quot;selected&quot;
                  close
                  @click=&quot;select&quot;
                  @click:close=&quot;remove(item)&quot;
              &gt;
                  &lt;strong&gt;{{ item.title }}&lt;/strong&gt;
              &lt;/v-chip&gt;
              &lt;/template&gt;
          &lt;/v-select&gt;
      &lt;/v-col&gt;
      {{attrArr}}
  &lt;/v-row&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  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: &quot;color&quot;,
                  items:[
                      {
                          id: 11,
                          title: &quot;blue&quot;
                      },
                      {
                          id: 12,
                          title: &quot;green&quot;
                      },
                      {
                          id: 13,
                          title: &quot;black&quot;
                      }
                  ]
              },
              {
                  id: 2,
                  title: &quot;size&quot;,
                  items:[
                      {
                          id: 21,
                          title: &quot;L&quot;
                      },
                      {
                          id: 22,
                          title: &quot;S&quot;
                      }
                  ]
              },
              {
                  id: 3,
                  title: &quot;Material&quot;,
                  items:[
                      {
                          id: 31,
                          title: &quot;X01&quot;
                      },
                      {
                          id: 32,
                          title: &quot;X02&quot;
                      },
                      {
                          id: 33,
                          title: &quot;X03&quot;
                      },
                      {
                          id: 34,
                          title: &quot;X04&quot;
                      }
                  ]
              }
          ]
      },
  
      methods: {
        remove (item) {
          this.attrArr.splice(this.attrArr.indexOf(item), 1)
          this.attrArr = [...this.attrArr]
        },
        changed(){
            this.$emit('changed', this.attrArr)
        }
      },
  }
  &lt;/script&gt;
  </code></pre>