Edit in JSFiddle

var app = new Vue({
  el: '#app',
  data: {
  	todoLists: [
    	{title: "会議資料を作成する", checkToggle: false},
      {title: "取引先にメールを返信する", checkToggle: false},
      {title: "見積書を作成する", checkToggle: false}
    ],
    newTitleToggle: false,
    newTitle: "",
  },
  methods: {
  	checkEnteredValue(){
    	if(this.newTitle !== ""){
      	this.newTitleToggle = true;
      }else{
      	this.newTitleToggle = false;
      }
    },
  	addToDoList(){
      this.todoLists.push({
        title: this.newTitle,
        checkToggle: false
      });
      this.newTitleToggle = false;
      this.newTitle = '';
  	},
    deleteToDoList(){
    	this.todoLists = this.todoLists.filter(function(list) {
        return list.checkToggle === false; 
      });
    }
	}
})
<div id="app">
  <ul>
    <li v-for="todoList in todoLists">
      <input type="checkbox" v-model="todoList.checkToggle">
      <label v-bind:class={doneTask:todoList.checkToggle}>
        {{ todoList.title }}
      </label>
    </li>
  </ul>
  <hr>
  <input type="text"
    class="taskInput"
    placeholder="新しいタスクを追加する" 
    v-model="newTitle"
    v-on:change="checkEnteredValue()"
  >
  <button id="addBtn"
    v-on:click="addToDoList()" 
    v-bind:class={noclick:!newTitleToggle}
  >
    タスクを追加
  </button>
  <br>
  <button id="deleteBtn"
    v-on:click="deleteToDoList()"
  >
    タスクを削除
  </button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
*{
  font-size: 18px;
}

*:focus {
  outline: none;
}

li{
  list-style: none;
}

.taskInput, button{
  height: 36px;
  border: none;
  border-radius: 18px;
}

.taskInput{
  width: 216px;
  background-color: #eeeeee;
  padding-left: 12px;
}

button{
  color: #ffffff;
  width: 144px;
  cursor: pointer;
}

#addBtn{
  background-color: #c81c14;
  margin-left: 6px;
}

#deleteBtn{
  background-color: #00508e;
  margin-top: 12px;
}

.doneTask {
  opacity: 0.7;
  text-decoration: line-through;
}

.noclick {
  pointer-events: none;
  user-select: none;
  opacity: 0.5;
}