Vue.jsでToDoリストのTask追加機能を作りたい

実現したいこと

下にあるモックアップのようなTask追加機能をVue.jsで実装したいです
フレームワークはNuxt.jsを使ってます

実際に記述したコード

pagesの下のindex.vue

<template>
  <div>
    <h1>Todoリストメモ</h1>
    <input v-model="inputTasks" placeholder="Taskを入力してください" />
    <button @click="addTasks">追加</button>
    <button @click="reset">リセット</button>
    リロードすると最初の状態に戻ります
  </div>
</template>

<script>
import task from '~/components/Task.vue'

export default {
  components: { task }, 
  data() {
    return {
      inputTasks: '',
      todoList: [],
      isChecked: false,
    }
  },
}
</script>

<style scoped>
.lineThrough {
  text-decoration: line-through;
}

.checkSpan {
  color: #636363;
}

.item {
  font-size: 2rem;
}
</style>

componentsの下のTask.vue

<template>
    <div id="task">{{ text }}</div>
    <input type="checkbox" v-model="isChecked" id="check" />
    <span 
      :class="{ lineThrough: isChecked }" 
      v-for="(todo, index) in todoList" 
      :key="index" 
      class="item">
      {{ todo }}
    </span>
</template>

<script>
export default{
    props: {
      text: {
          type: String,
          require: false
      } 
    },
}
</script>
<style scoped>
#task {
    font-size: 48px;
}
</style>

どなたかヒントだけでも頂けないでしょうか？ご教授願います。