Vue Single File Component with all the basics

vue-sfc-template.html

<template>
  <p>Todo count: {{todos.length}}</p>
  <input ref="newTodo" type="text">
  <button v-on:click="add">Add</button>
  <ul v-if="todos.length">
    <li v-for="(todo, i) of todos" :key="i">{{todo}} <button v-on:click="remove(i)">Remove</button></li>
  </ul>
</template>

<script>
  export default {
    name: 'my-todos',
    
    // Lifecycle methods: https://vuejs.org/v2/api/#Options-Lifecycle-Hooks

    data () {
      return {
        todos: []
      }
    },

    methods: {
      add(e) {
        const todo = this.$refs.newTodo.value;
        this.todos.push(todo);
      },
      
      remove(i) {
        this.todos.splice(i, 1);
      }
    }
  }
</script>

<style scoped>
  ul { list-style: none }
</style>