Use pinia

app/components/map/clusters.client.vue

@@ -1,10 +1,6 @@
 <template>
     <ClientOnly>
-        <mgl-geo-json-source
-            v-if="clusters"
-            source-id="clusters"
-            :data="clusters"
-        >
+        <mgl-geo-json-source source-id="clusters" :data="clusters">
             <mgl-circle-layer
                 layer-id="clusters_dots"
                 :paint="cluster_paint"
@@ -31,12 +27,14 @@ const cluster_paint = {
 const cluster_label = {
     "text-field": ["get", "id"],
 };
-const map = useMap();
+const map = useMap("main");
 
 const { clusters } = defineProps<{
     clusters: FeatureCollection<Point>;
 }>();
 
+console.log(clusters);
+
 async function clusterClick(e: FeatureCollection) {
     const feature = e.features[0];
     if (!feature || !feature.properties) {
@@ -50,15 +48,12 @@ async function clusterClick(e: FeatureCollection) {
     const data = await $fetch<FeatureCollection<Point>>(
         `https://data.mobilites-m.fr/api/clusters/${code}/stops`,
     );
-    if (!map.map) {
-        return;
-    }
     new Popup()
         .setLngLat(coordinates)
         .setHTML(
             `Cluster code : ${feature.properties.code}<br/>This cluster contains ${data.features.length} stops`,
         )
-        .addTo(map.map);
+        .addTo(map.map!);
 }
 
 function clusterEnter() {