Fix booking update and reactivity

src/components/BoatReservationComponent.vue

@@ -221,9 +221,9 @@ const onSubmit = async () => {
     )
   ) {
     // TODO: Make a proper validator
-    return;
+    return false;
   }
-  const reservation = <Reservation>{
+  const newReservation = <Reservation>{
     resource: booking.interval.resource,
     start: booking.interval.start,
     end: booking.interval.end,
@@ -231,6 +231,7 @@ const onSubmit = async () => {
     status: 'confirmed',
     reason: booking.reason,
     comment: booking.comment,
+    $id: reservation.value?.$id,
   };
   const status = $q.notify({
     color: 'secondary',
@@ -243,11 +244,11 @@ const onSubmit = async () => {
     group: false,
   });
   try {
-    const r = await reservationStore.createReservation(reservation);
+    const r = await reservationStore.createOrUpdateReservation(newReservation);
     status({
       color: 'positive',
       icon: 'cloud_done',
-      message: `Booking successful: ${
+      message: `Booking ${newReservation.$id ? 'updated' : 'created'}: ${
         boatStore.getBoatById(r.resource)?.name
       } at ${formatDate(r.start)}`,
       spinner: false,