How to make the input empty but store the todo with the right description ?

[RoelofWobben]

Hello

I have a store like this :

import { defineStore } from "pinia";
import { useStorage, type RemovableRef } from '@vueuse/core'
import { ref } from "vue";

export type RootState = {
    todos : RemovableRef<Todo []>
}

export const useTodoStore = defineStore('todosStore', {
    
    state: ()  => ({
        todos: useStorage('todos', [])
    }as RootState),
    getters:{
        getAllTodos(): Todo[] {
            return this.todos
        },
    },
    actions : {
        addTodo(todo: Todo) {
            this.todos.push(todo)
        }

    }

})

and add todos like this in header.vue

const todo = reactive<Todo>({
        id : uuidv4(),
        description: '', 
        isCompleted: false
})

const store = useTodoStore(); 

const submitTodo = () => {
    store.addTodo(todo); 
    todo.description = '' ; 
}

but now the todo is stored with a empty description.

What do I need to change to make this work ?