<template>
<div>
   <h1> Hello {{title}}</h1>
   <input type="text" v-model="title">
   <button @click="addTask">Add</button>
    <h4>{{length}} tasks</h4>
   <ul>
     <li v-for="task in todos" :key="i">{{task.details}}</li>
    </ul>
</div>
</template>

<script>
export default {
  //changes sa state
  computed: {
    length() {
      return this.todos.length
    }

  },
  data () {
    return {
      title: 'Vue.js Manila ',
      todos: []
    }
  },
  methods: {
    addTask () {
      let todo = {
        details: this.title
      }
      this.todos.push(todo)
    }
  }
}
</script>