Sorted out a bunch of reactivity issues

src/components/scheduling/ReservationCardComponent.vue

@@ -14,6 +14,8 @@
               Start: {{ formatDate(reservation.start) }}
               <br />
               End: {{ formatDate(reservation.end) }}
+              <br />
+              Type: {{ reservation.reason }}
             </p>
           </div>
         </div>
@@ -50,7 +52,7 @@
     <q-card-actions v-if="!isPast(reservation.end)">
       <q-btn
         flat
-        @click="modifyReservation()">
+        :to="{ name: 'edit-reservation', params: { id: reservation.$id } }">
         Modify
       </q-btn>
       <q-btn
@@ -107,8 +109,4 @@ const reservation = defineModel<Reservation>({ required: true });
 const cancelReservation = () => {
   cancelDialog.value = true;
 };
-
-const modifyReservation = () => {
-  return;
-};
 </script>