Many improvements. Still no reactivity on List

src/pages/schedule/ListReservationsPage.vue

@@ -22,7 +22,7 @@
       class="q-pa-none">
       <q-card
         clas="q-ma-md"
-        v-if="!reservationStore.futureUserReservations.length">
+        v-if="!futureUserReservations.length">
         <q-card-section>
           <div class="text-h6">You don't have any upcoming bookings!</div>
           <div class="text-h8">Why don't you go make one?</div>
@@ -41,7 +41,7 @@
       </q-card>
       <div v-else>
         <div
-          v-for="reservation in reservationStore.futureUserReservations"
+          v-for="reservation in sortedUserReservations"
           :key="reservation.$id">
           <ReservationCardComponent :modelValue="reservation" />
         </div>
@@ -51,7 +51,7 @@
       name="past"
       class="q-pa-none">
       <div
-        v-for="reservation in reservationStore.pastUserReservations"
+        v-for="reservation in pastUserReservations"
         :key="reservation.$id">
         <ReservationCardComponent :modelValue="reservation" />
       </div>
@@ -63,7 +63,9 @@ import { useReservationStore } from 'src/stores/reservation';
 import ReservationCardComponent from 'src/components/scheduling/ReservationCardComponent.vue';
 import { ref } from 'vue';
 
-const reservationStore = useReservationStore();
+const { sortedUserReservations, futureUserReservations, pastUserReservations } =
+  useReservationStore();
+
 const tab = ref('upcoming');
 
 // const showMarker = (