attemp at handling data not ready in state

app/components/map/map.client.vue

@@ -26,7 +26,7 @@ const center = new LngLat(5.735, 45.185);
 const zoom = 12;
 
 const store = useMresoStore();
-await store.fetchData();
+store.fetchData();
 const shownClusters = ref<FeatureCollection<Point> | null>(null);
 
 const { selectedRoutesId } = defineProps<{
@@ -49,7 +49,6 @@ watchEffect(async () => {
             .filter((c) => c !== undefined),
     };
     const firstPoint = shownClusters.value.features[0];
-    console.log(firstPoint);
     if (!firstPoint) {
         return;
     }

app/stores/mreso.ts

@@ -20,10 +20,6 @@ export const useMresoStore = defineStore("mresoStore", {
         $fetch<FeatureCollection<Point>>("/clusters.json", options),
         $fetch<FeatureCollection<Point>>("/stops.json", options),
       ]);
-
-      this.lines = await $fetch("/lines.json", options);
-      this.clusters = await $fetch("/clusters.json", options);
-      this.stops = await $fetch("/stops.json", options);
     },
   },
   getters: {
@@ -31,11 +27,17 @@ export const useMresoStore = defineStore("mresoStore", {
       return Object.fromEntries(state.routes.map((r) => [r.id, r]));
     },
     linesById(state): { [id: string]: Feature<MultiLineString> } {
+      if (!state.lines) {
+        return {};
+      }
       return Object.fromEntries(
         state.lines.features.map((l) => [l.properties!.id, l]),
       );
     },
     clustersById(state): { [id: string]: Feature<Point> } {
+      if (!state.clusters) {
+        return {};
+      }
       return Object.fromEntries(
         state.clusters.features.map((l) => [l.properties!.id, l]),
       );