title: v-model with nested objects, accidentally reactivelly changing half array instead of single item
body: <p>It is supposed to dynamically add players, when u click 'add'. But it doesn't let you properly enter names. It changes the name for half the players in array.</p>
  
  <pre><code>&lt;div id="app"&gt;
      &lt;div v-for="player in players"&gt;
          &lt;select v-model="player.type"&gt;
              &lt;option :value="option" v-for="option in playerOptions"&gt;{{option.color}}&lt;/option&gt;
          &lt;/select&gt;
          &lt;input v-if="player.type" type="text" v-model="player.type.name"&gt;
          &lt;hr&gt;
      &lt;/div&gt;
      &lt;button @click="addSel()"&gt;add select&lt;/button&gt;
      &lt;hr&gt;
      {{players}}
  &lt;/div&gt;
  &lt;script&gt;
      new Vue({
          el: '#app',
          data: () =&gt; ({
              playerOptions: [{ color: 'red', name: ''},
                              { color: 'blue', name: ''}],
              players: [{ type: null }]
          }),
          methods: {
              addSel() {
                  this.players.push({type: null})
              }
          }
      })
  &lt;/script&gt;
  </code></pre>
  
  <p><a href="https://codepen.io/origami1024/pen/ZEEMPQK" rel="nofollow noreferrer">https://codepen.io/origami1024/pen/ZEEMPQK</a></p>