fix: Improve reactivity in intervals

src/pages/schedule/ManageCalendar.vue

@@ -26,7 +26,9 @@
           cell-width="150px">
           <template #day="{ scope }">
             <div
-              v-if="filteredIntervals(scope.timestamp, scope.resource).length"
+              v-if="
+                filteredIntervals(scope.timestamp, scope.resource).value.length
+              "
               style="
                 display: flex;
                 flex-wrap: wrap;
@@ -35,10 +37,8 @@
                 font-size: 12px;
               ">
               <template
-                v-for="block in sortedIntervals(
-                  scope.timestamp,
-                  scope.resource
-                )"
+                v-for="block in sortedIntervals(scope.timestamp, scope.resource)
+                  .value"
                 :key="block.id">
                 <q-chip class="cursor-pointer">
                   {{ date.formatDate(block.start, 'HH:mm') }} -
@@ -163,7 +163,7 @@ import {
 } from '@quasar/quasar-ui-qcalendar';
 import { Boat, useBoatStore } from 'src/stores/boat';
 import { useIntervalStore } from 'src/stores/interval';
-import { onMounted, ref } from 'vue';
+import { computed, onMounted, ref } from 'vue';
 import type {
   Interval,
   IntervalTemplate,
@@ -208,8 +208,10 @@ const filteredIntervals = (date: Timestamp, boat: Boat) => {
 };
 
 const sortedIntervals = (date: Timestamp, boat: Boat) => {
-  return filteredIntervals(date, boat).sort(
-    (a, b) => Date.parse(a.start) - Date.parse(b.start)
+  return computed(() =>
+    filteredIntervals(date, boat).value.sort(
+      (a, b) => Date.parse(a.start) - Date.parse(b.start)
+    )
   );
 };
 
@@ -293,7 +295,7 @@ function onDrop(
     overlapped.value = boatsToApply
       .map((boat) =>
         intervalsOverlapped(
-          existingIntervals.concat(
+          existingIntervals.value.concat(
             intervalsFromTemplate(boat, templateId, date)
           )
         )