JSFiddle - React, Tailwind, and code Playground

HTML

<!-- vue jsの読み込み -->
<script src="https://unpkg.com/vue"></script>
<!-- id(この例の場合app)はjs側のelで指定された名前に合わせる必要がある -->
<div id="app">
  <input v-on:keypress.enter="addTodo" v-model="input" type="text">
  <button v-on:click="addTodo">追加</button>
  <ul v-for="todo in todos">
    <li>
      <input v-on:change="doneTodo(todo)" v-model="todo.done" type="checkbox">
      <span v-bind:class="{'done': todo.done}">{{ todo.title }}</span>
      <button v-on:click="deleteTodo(todo)">削除</button>
    </li>
  </ul>
</div>

CSS

li {
   list-style-type: none
}
.done {
  text-decoration: line-through;
  color: grey;
}

JavaScript

new Vue({
  el: '#app',
  data: {
    input: '' ,
    todos: JSON.parse(localStorage.getItem('todos')) || [],
  },
  methods: {
  	addTodo: function (event){
    	// 空の場合追加されないように
    	if (this.input){
      	this.todos.push({title: this.input, done: false});
        // 追加後にinputを空に
      	this.input = ''
      }
      this.setTodos()
    },
    doneTodo: function (todo){
        this.setTodos()
    },
    deleteTodo: function (todo){
    	var index = this.todos.indexOf(todo);
    	this.todos.splice(index, 1)
      this.setTodos()
    },
    // localStrageに保存
    setTodos() {
      localStorage.setItem('todos', JSON.stringify(this.todos));
    }
  }
})