How to add and remove item from array in components in Vue 2
<p>I made a component "my-item" which contains three elements: a dropdown (populated by "itemList") and two input boxes populated from the dropdown.
This component is considered a row.</p>

<p>I am trying to add and delete one row at a time but two things i am not sure about.
(1) what to add to the rows array?
(2) why is this.rows.splice(index,1) removing only the last row?</p>

<p><a href="https://jsbin.com/mugunum/edit?html,output" rel="noreferrer">https://jsbin.com/mugunum/edit?html,output</a></p>

<p>Thanks</p>

<pre><code>&lt;div id="app"&gt;
    &lt;my-item v-for="(row, index) in rows"
         :itemdata="itemList"
          v-on:remove="removeRow(index)"&gt;
    &lt;/my-item&gt;
&lt;div&gt;
    &lt;button @click="addRow"&gt; Add Row &lt;/button&gt;
&lt;/div&gt;
&lt;/div&gt;

&lt;template id="item-template"&gt;
&lt;div&gt;
    &lt;select v-model="selected"&gt;
        &lt;option v-for="item in itemdata"  :value="item"&gt;
           {{ item.code }}
        &lt;/option&gt;
    &lt;/select&gt;
    &lt;input type="text" placeholder="Text" v-model="selected.description"&gt;
    &lt;input type="text" placeholder="value" v-model="selected.unitprice"&gt;
    &lt;button v-on:click= "remove"&gt; X &lt;/button&gt;
&lt;/div&gt;
&lt;/template&gt;

Vue.component('my-item', {
props: ['itemdata'],
template: '#item-template',
data: function () {
    return {
    selected: this.itemdata[0]
    }
},
methods: {
    remove() {
        this.$emit('remove');
    }
}
}),

new Vue({
el: "#app",
data: {
    rows: [],
    itemList: [
        { code: 'Select an Item', description: '', unitprice: ''},
        { code: 'One', description: 'Item A', unitprice: '10'},
        { code: 'Two', description: 'Item B', unitprice: '22'},
        { code: 'Three', description: 'Item C', unitprice: '56'}
    ]
},

methods: {
    addRow(){
       this.rows.push(''); // what to push unto the rows array?
    },
    removeRow(index){
       this.rows.splice(index,1); // why is this removing only the last row?
    }
}
})
</code></pre>