Sorted out reactivity with storeToRefs

src/stores/boat.ts

@@ -1,7 +1,7 @@
 import { Models } from 'appwrite';
 import { defineStore } from 'pinia';
 import { AppwriteIds, databases } from 'src/boot/appwrite';
-import { computed, ref } from 'vue';
+import { ref } from 'vue';
 
 // const boatSource = null;
 
@@ -25,7 +25,7 @@ export interface Boat extends Models.Document {
 }
 
 export const useBoatStore = defineStore('boat', () => {
-  const boatData = ref<Boat[]>([]);
+  const boats = ref<Boat[]>([]);
 
   async function fetchBoats() {
     try {
@@ -33,18 +33,11 @@ export const useBoatStore = defineStore('boat', () => {
         AppwriteIds.databaseId,
         AppwriteIds.collection.boat
       );
-      boatData.value = response.documents as Boat[];
+      boats.value = response.documents as Boat[];
     } catch (error) {
       console.error('Failed to fetch boats', error);
     }
   }
 
-  const boats = computed(() => {
-    if (!boatData.value) {
-      fetchBoats();
-    }
-    return boatData;
-  });
-
   return { boats, fetchBoats };
 });