[Vuejs]-Vue.js real time form not working with dynamic rows

Okay I wish to provide an update on the situation; I worked a bit in JSFiddle and this is the outcome:

Now on JSFiddle it works fine; in my browser I get Vue.js warnings whenever I hit a key on my keyboard whilst entering in Label. That looks like: http://prntscr.com/cwp56f .

JSFiddle with these code snippets: https://jsfiddle.net/epdo2prz/

VIEW

<div id="app">
<table class="table">
<thead>
<tr>
  <td><strong>Label</strong></td>
  <td><strong>Internal Name</strong></td>
</tr>
</thead>
<tbody>
<tr v-for="row in rows">
  <td><comp1 :prop.sync="input"></comp1></td>
  <td><comp2 :prop.sync="input"></comp2></td>
  <td><a @click="removeRow(row)">Remove</a></td>
</tr>
  </tbody>
</table>
<div>
<button class="button btn-primary" @click="addRow">Add row</button>
</div>
</div>

MODEL

var Component1 = Vue.extend({
template: '<input type="text" v-model="prop"/>',
props: ['prop']
})

var Component2 = Vue.extend({
template: '<input type="text" v-model="prop"/>',
props: ['prop']
})

var app  = new Vue({
el: "#app",
data: {
rows: [
  {label: "",internal_name: ""}
]
},
methods:{
addRow: function(){
  this.rows.push({label:"",internal_name:""});
},
removeRow: function(row){
  //console.log(row);
  this.rows.$remove(row);
}
},
components: {
    'comp1': Component1,
  'comp2': Component2
}
});