Why I when i want clear description in object it cannot

Question

<script setup>
import { TodoManager } from "../../../lib/TodoManger";
import { computed, reactive, ref, watch } from "vue";
import List from "./List.vue";
import Todo from "../Todo.vue";

const todoTemplate = reactive({
  id: Date.now(),
  description: "",
  is_success: false,
  timeStamp: Date.now()
  
})


const manager = ref(new TodoManager());
const addTodo = ref(false)
const todos = computed(() => {
  return manager.value.getNotDone();
});
const todos_success = computed(() => {
  return manager.value.getDone();
});
function handleDelete(id) {
  manager.value.deleteTodo(id);
}
function handleState(id) {
  manager.value.updateTodoState(id);
  console.log(manager.value.todos);
}
function addTodohandle(todo){
  manager.value.addTodo(todo);
  console.log(todoTemplate);
  todoTemplate.description = "";
  console.log(todoTemplate);
  addTodo.value = false

 
  
}
</script>

<template>
  <div class="p-3">
    <button class="btn bg-slate-200"  @click="addTodo = !addTodo">New Todo</button>
  </div>
  <div class="absolute flex w-full h-1/2 items-center justify-center" v-show="addTodo" >
    <div
      class="w-1/6 h-1/2 rounded-md bg-slate-500 border border-cyan-700 flex justify-center items-center flex-col gap-3"  >
  
      <input
        type="text"
        class="w-1/2 h-1/6 rounded-sm input max-w-xs"
        placeholder="New Todo"
        v-model="todoTemplate.description"
      />
      <div class="flex gap-3 pt-5">
        <button class="btn bg-blue-900" @click="addTodohandle(todoTemplate)">Add Todo</button>
        <button class="btn bg-red-700" @click="addTodo = !addTodo">Cancel</button>
      </div>
    </div>
  </div>
  <List>
    <Todo
      v-for="todo in todos"
      :key="todo.id"
      :description="todo.description"
      :isSuccess="todo.is_success"
      :id="todo.id"
      :todo="todo"
      @delete-todo="handleDelete"
      @edit-todo="editTodo"
      @check-todo="handleState"
    />
    <template #success>
      <Todo
        v-for="todo in todos_success"
        :key="todo.id"
        :description="todo.description"
        :isSuccess="todo.is_success"
        :id="todo.id"
        :todo="todo"
        @delete-todo="handleDelete"
        @edit-todo="editTodo"
        @check-todo="handleState"
      />
    </template>
  </List>
</template>



<style>
</style>

I'm working on a todo list application using JavaScript, HTML, and CSS. I have an input field where users can enter a description for their todo, and a button labeled "Add Todo" to add it to the list. I want to implement a feature where, after clicking the "Add Todo" button, the input field clears, allowing the user to input a new todo without manually deleting the previous description.