SOURCE

 var app= new Vue({
        el:"#app",
        data:{
            arr:["boy","girl","both"],
            vegetables:[
                {name:"cabbage"},
                {name: "broccoflower"},
                {name:"broccoli"}
                ]

        },
        methods:{
            addItem:function(){
                this.vegetables.push({
                    name:"asparagus"
                })
            },

            removeItem:function(){
                this.vegetables.shift();
            }
        },
        
    })

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
    <input type="button" value="Add Item" @click="addItem"></input>
    <input type="button" value="Remove Item" @click="removeItem"></input>
    <ul v-for="(item,index) in arr">
        <li>{{index+1}}. {{item}}</li>
    </ul>
    <ul v-for="item in vegetables">
        <li>{{item.name}}</li>
    </ul>

</div>

.left{
    float: left;
    
}
.right{
    float: left;
    
}