Sorted out reactivity with storeToRefs

src/components/scheduling/boat/BoatScheduleTableComponent.vue

@@ -14,7 +14,7 @@
         interval-start="06:00"
         :short-interval-label="true"
         v-model="selectedDate"
-        :column-count="boatData.length"
+        :column-count="boats.length"
         v-touch-swipe.left.right="handleSwipe"
       >
         <template #head-day="{ scope }">
@@ -34,12 +34,12 @@
               :id="block.id"
               @click="selectBlock($event, scope, block)"
             >
-              {{ boatData[scope.columnIndex].name }}<br />
+              {{ boats[scope.columnIndex].name }}<br />
               {{ selectedBlock?.$id === block.$id ? 'Selected' : 'Available' }}
             </div>
           </div>
           <!-- <div
-            v-for="r in boatData[scope.columnIndex].reservations"
+            v-for="r in boats[scope.columnIndex].reservations"
             :key="r.id"
           >
             <div
@@ -76,12 +76,12 @@ import CalendarHeaderComponent from './CalendarHeaderComponent.vue';
 import { ref, computed } from 'vue';
 import { useBoatStore } from 'src/stores/boat';
 import { useScheduleStore } from 'src/stores/schedule';
-import { Timeblock } from 'src/stores/schedule.types';
+import { TimeBlock } from 'src/stores/schedule.types';
+import { storeToRefs } from 'pinia';
 
 const scheduleStore = useScheduleStore();
-const boatStore = useBoatStore();
-const boatData = boatStore.boats;
-const selectedBlock = defineModel<Timeblock | null>();
+const { boats } = storeToRefs(useBoatStore());
+const selectedBlock = defineModel<TimeBlock | null>();
 const selectedDate = ref(today());
 
 const calendar = ref<QCalendarDay | null>(null);
@@ -103,7 +103,7 @@ function handleSwipe({ ...event }) {
 // }
 
 function blockStyles(
-  block: Timeblock,
+  block: TimeBlock,
   timeStartPos: (t: string) => string,
   timeDurationHeight: (d: number) => string
 ) {
@@ -116,8 +116,8 @@ function blockStyles(
 }
 
 function getBoatDisplayName(scope: DayBodyScope) {
-  return boatData && boatData.value[scope.columnIndex]
-    ? boatData.value[scope.columnIndex].displayName
+  return boats && boats.value[scope.columnIndex]
+    ? boats.value[scope.columnIndex].displayName
     : '';
 }
 
@@ -154,7 +154,7 @@ interface DayBodyScope {
   timestamp: Timestamp;
 }
 
-function selectBlock(event: MouseEvent, scope: DayBodyScope, block: Timeblock) {
+function selectBlock(event: MouseEvent, scope: DayBodyScope, block: TimeBlock) {
   // TODO: Disable blocks before today with updateDisabled and/or comparison
   selectedBlock.value === block
     ? (selectedBlock.value = null)
@@ -162,12 +162,12 @@ function selectBlock(event: MouseEvent, scope: DayBodyScope, block: Timeblock) {
 }
 
 interface BoatBlocks {
-  [key: string]: Timeblock[];
+  [key: string]: TimeBlock[];
 }
 
 const boatBlocks = computed((): BoatBlocks => {
   return scheduleStore
-    .getTimeblocksForDate(selectedDate.value)
+    .getTimeBlocksForDate(selectedDate.value)
     .reduce((result, tb) => {
       if (!result[tb.boatId]) result[tb.boatId] = [];
       result[tb.boatId].push(tb);
@@ -175,18 +175,18 @@ const boatBlocks = computed((): BoatBlocks => {
     }, <BoatBlocks>{});
 });
 
-function getBoatBlocks(scope: DayBodyScope): Timeblock[] {
-  return boatData.value[scope.columnIndex]
-    ? boatBlocks.value[boatData.value[scope.columnIndex].$id]
+function getBoatBlocks(scope: DayBodyScope): TimeBlock[] {
+  return boats.value[scope.columnIndex]
+    ? boatBlocks.value[boats.value[scope.columnIndex].$id]
     : [];
 }
 
 // function changeEvent({ start }: { start: string }) {
-// const newBlocks = scheduleStore.getTimeblocksForDate(start);
+// const newBlocks = scheduleStore.getTimeBlocksForDate(start);
 // const reservations = scheduleStore.getBoatReservations(
 //   parsed(start) as Timestamp
 // );
-// boatData.value.map((boat) => {
+// boats.value.map((boat) => {
 //   boat.reservations = reservations.filter(
 //     (reservation) => reservation.resource === boat
 //   );