title: vuetify v-select in v-for loop: selected option appears in all iterations of the v-select
body: <p>I have a v-select nested in a v-for for items..</p>
  
  <p>So, basically, v-for item in items gives me a table containing all items.
  In this table, I have a v-select containing it's own array of items pulled from a computed property (getter). </p>
  
  <p>So, if I have 3 items, then I would have a 3 item table with 3 v-selects all containing the same dropdown options populated from the computed. </p>
  
  <p><strong>My issue is, when I select an option in one v-select, it populates in all of them.</strong> </p>
  
  <p>How do I configure it to only populate the one particular v-select, and not all of them?</p>
  
  <p>Surprisingly, every example I have researched, is either dealing with nested data, or something else not relevant here. But if this does happen to be a duplicate, I would be happy to be pointed in the right direction.</p>
  
  <p><strong>a bit of shorthand code for context:</strong></p>
  
  <pre><code>&lt;v-data-table :items="getItems"&gt;
  &lt;tr&gt;
  &lt;td&gt;{{ item.name }}&lt;/td&gt;
  &lt;td&gt; &lt;v-select :items="availableSelections"/&gt;
  &lt;/tr&gt;
  &lt;/v-data-table&gt;
  
  get getItems() {
   // returns iterated items
  }
  get availableSelections() {
   // returns selection choices in an array
  </code></pre>
  
  <p><strong>So, my intended behavior here is,</strong> if I have 3 items returned from getItems(), I would have 3 rows filled with 3 names and 3 v-selects, all with the same dropdown choices from availableSelections(). But when I select an option from a v-select from one row, it would not populate the other v-selects in other rows.</p>