title: Manipulating v-list-item-group model with object instead of list index
body: <p>I am using v-list-item-group to display a list of dynamic items (entities that can be created/deleted), of which can be selected to display more information about the selected item.</p>
  
  <p>Up until this point, I have simply been using the model of v-list-item-group to determine which item has been selected.</p>
  
  <pre><code>&lt;template&gt;
  
  &lt;v-list&gt;
    &lt;v-list-item-group v-model="listSelection"&gt;
      &lt;v-list-item v-for="(item, index) in items" :key="index"&gt;
  
      &lt;/v-list-item&gt;
    &lt;/v-list-item-group&gt;
  &lt;/v-list&gt;
  
  &lt;/template&gt;
  
  
  &lt;script&gt;
  
  export default {
  
    props: {
      value: Object
    },
  
    computed: {
      items: function() {
        return this.$store.state.items // Collection of entities from a server
      },
      listSelection: {
        get: function() {
          return this.items.indexOf(this.value)
        },
        set: function(newVal) {
          this.$emit('input', this.items[newVal])
        }
      }
    },
  
  }
  
  &lt;/script&gt;
  </code></pre>
  
  <p>This approach works fine with the initial data set, as the first element in the list is the first object in <code>items</code>, etc. However, if I add an entity in the middle, or remove something, or simply cause one of the items to shift to a different position in the list, the index to item position becomes invalid. Essentially if the list adds a new element, regardless of its position, its value (when selected in the group) is the next highest unused value. For example:</p>
  
  <pre><code>let fruits = ['apple', 'carrot']
  </code></pre>
  
  <p><code>&lt;v-list-item&gt;</code> for apple will have a value 0, and <code>&lt;v-list-item&gt;</code> for carrot will have a value 1.</p>
  
  <pre><code>fruits.splice(1, 0, "banana")
  </code></pre>
  
  <p><code>&lt;v-list-item&gt;</code> for apple will have a value 0, <code>&lt;v-list-item&gt;</code> for banana will have a value 2, and <code>&lt;v-list-item&gt;</code> for carrot will have a value 1.</p>
  
  <p>I've done a bunch of playing around with v-model and value in <code>v-list-item-group</code>, but have not figured out how to avoid this problem. I would be fine with adding an <code>@click</code> on my items, and having the items set a <code>value</code>, rather than computing based on the list, but I would like the list selection to be maintained based on the <code>value</code>. </p>
  
  <p>As best as i've read, <a href="https://vuetifyjs.com/en/components/lists" rel="noreferrer">the documentation</a> indicates that selection in lists should be handled using a v-list-item-group, but the component doesn't seem to support dynamic lists too well.</p>