Vue3 TypeScript ToDo

<template>
 
  <div>
    <input
      v-model="inputField"
      v-on:keyup.enter="addTodo"
      placeholder="Todo Item"
    />
    <button
      @click="addTodo"
    >
      Add Todo
    </button>
  </div>
 
  <div>
          <div>
             <div>
                <ul>
                   <li
                    v-for="todo in todoList"
                    :key="todo"
                    >
                      <div>
                        <input
                          type="checkbox"
                          v-on:change="toggle(todo)"
                          v-bind:checked="todo.complete"
                        >
                        <del v-if="todo.complete">
                           <h5>{{ todo.name }}</h5>
                        </del>
                        <span v-else>
                           <h5>{{ todo.name }}</h5>
                        </span>
                        <span @click="deleteTodo(todo)">X</span>
                      </div>
                   </li>
                </ul>
             </div>
          </div>
       </div>
 
</template>
 
<script lang="ts">
 
export default {
  methods: {
    addTodo(todo) {
      todo = this.inputField;
      this.todoList.push({ name: todo, complete: false });
      this.inputField = '';
      console.log(this.todoList);
    },
    deleteTodo(todo) {
      const index = this.todoList.indexOf(todo);
      this.todoList.splice(index, 1);
      console.log(this.todoList);
    },
    toggle(todo) {
      todo.complete = !todo.complete;
    },
  },
  data() {
    return {
      inputField: '',
      todoList: [],
    };
  },
};
</script>