Markers in the same position don't work properly with Vue3 + Leaflet Markercluster

Question

The problem is that the leaflet map inside the vue3 App loads perfectly and looks great. Also, when you click on a location with two icons in the same position, they open perfectly, but when you click on the same place again, the icons disappear and the "spider" remains visible (see picture). spider remains

The methods in the Vue3 App are:

methods:{
  setupMarkers(){
    this.markers.clearLayers();
    this.cursesData.forEach(cursa =>this.ficaMarkers(cursa));
    this.map.addLayer(this.markers);
  },
  setupLeafletMap(){
    this.map=L.map("mapContainer").setView(this.center,6);
    L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",{
      attribution:'OpenStreetMap',
    }).addTo(this.map);
    this.markers= L.markerClusterGroup({
      //spiderfyOnMaxZoom: true,
      });
    
  },
  ficaMarkers(cursa){
    this.markers.addLayer(L.marker([cursa.coordenades[0],cursa.coordenades[1]],{title:cursa.nom})
    .bindPopup(cursa.distancies)
    )
  },
},

If someone could help me, I would be very grateful. Thanks.

Answer 1

It is a similar issue as in Uncaught TypeError: this._map is null (Vue.js 3, Leaflet) :

What seems to be the culprit is the proxying of this.map by Vue, which seems to interfere with Leaflet events (un)binding. It looks like Vue 3 now automatically performs deep proxying, whereas Vue 2 was shallow.

In your case, the same thing happens for this.markers (which is the Leaflet MarkerClusterGroup).

A solution consists in "unwrapping" / un-proxying the map and the mcg whenever you use them, e.g. with Vue3's toRaw:

toRaw(this.map).addLayer(toRaw(this.markers));

Then we retrieve the normal MCG behaviour, i.e. if you click on the cluster while it is already spiderfied, nothing happens (whereas initially the Markers were collapsing, but the spider legs were remaining indefinitely)

Fixed CodeSandbox: https://codesandbox.io/s/markers-hide-spiders-stay-forked-l2ruqh?file=/src/App.vue