creating modal works, edit modal is showing

web/pages/index.vue

@@ -7,23 +7,21 @@ import { Event, type SerializableEvent } from '~/utils/event';
 
 const date = ref<DateTime>(DateTime.now())
 const events = ref<Event[]>([])
+const tasks = ref<Task[]>([])
 
 const { data: eventsResponse } = await useAsyncData<SerializableEvent[]>(
 	'events',
 	() => axios.get<SerializableEvent[]>('/events').then(res => res.data)
 );
 
-const {data: tasksResponse, refresh} = await useAsyncData<SerializableTask[]>(
+const { data: tasksResponse, refresh } = await useAsyncData<SerializableTask[]>(
 	'tasks',
 	() => axios.get<SerializableTask[]>('/tasks').then(res => res.data)
 );
 
 onMounted(() => {
 	events.value = eventsResponse.value?.map(Event.fromSerializable) ?? []
-})
-
-const tasks = computed(() => {
-	return tasksResponse.value?.map(Task.fromSerializable) ?? []
+	tasks.value = tasksResponse.value?.map(Task.fromSerializable) ?? []
 })
 
 async function postEvent(event: Event) {
@@ -31,16 +29,11 @@ async function postEvent(event: Event) {
 	await axios.post('/event', event.toSerializable())
 }
 
-async function postTask(name: string) {
+async function postTask(task: Task) {
 	console.log('posting Task')
-	await axios.post('/task', {
-		title: name,
-		description: "",
-		done: false,
-		estimated_time: 0,
-		due_date: (new Date()).toISOString(),
-	})
-	await refresh()
+	const createdTask = await axios.post<SerializableTask>('/task', task)
+	console.log(createdTask)
+	task.id = createdTask.data.id
 }
 
 async function deleteTask(id: number) {