Uncaught TypeError: Cannot read property 'push' of undefined in Vuejs

Question

Uncaught TypeError: Cannot read property 'push' of undefined. I am getting this error. Please help me figure out where I am going wrong. I am following this link( https://jsbin.com/fikosoxuki/15/edit?html,js,output )

<template>
    <v-card class="mb-12">
      <v-form :model='user' class="content-padding" ref='pdfInputs'> 
       <ul>
        <li v-for="(input, index) in user.inputs">
         <input type="text" v-model="input.one"> - {{ input.one }}  
         <input type="text" v-model="input.two"> - {{ input.two }}
         <button type="button" @click="deleteRow(index)">Delete</button>
        </li>
       </ul>    
       <button type="button" @click="addRow">Add more</button>
      </v-form>
    </v-card>
</template>

<script>
 export default {
  data () {
    return {
     user: {
      inputs: []
     }
    }
  }
  methods: {
    addRow() {
      this.user.inputs.push({
        one: '',
        two: ''
      })
    },
    deleteRow(index) {
      this.user.inputs.splice(index,1)
    }
  }
 }
</script>

Update (Error added)

Answer 1

I don't use Vue, but do you need to create a new Vue object first?

 const app = new Vue({ el: '#app', data: { user: { inputs: [] } }, methods: { addRow() { this.user.inputs.push({ one: '', two: '' }) }, deleteRow(index) { this.user.inputs.splice(index,1) } } }) export default app