vue v-model directives cannot update the iteration variable 'x' itself

new Vue({
  el: '#app',
  data: {
    settings: {
      runs: [1, 2, 3]
    }
  },
  methods: {
    removeRun: function(i) {
      console.log("Remove", i);
      this.settings.runs.splice(i,1);
    }
  }
});



<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.js"></script>
<table id="app">
  <tr v-for="(run, index) in settings.runs">
<td> <input type="text" :name="'run'+index" v-model="settings.runs[index]" /> </td>     <td>       <button @click.prevent="removeRun(index)">X</button>     </td>     <td>       {{run}}












    </td>

  </tr>
</table>