Mounting custom vue component as a tooltip/popup on leaflet on each geojson object

Question

I would like to mount my custom MapDeparturePin component to leaflet map. Circle Markers created by L.geoJSON method and I tried to bind popupInstance to each generated marker. Here is the code:

geoJSON(states, {
    onEachFeature: (feature, layer) => {
      // Create a Vue component instance as the popup
      const popupInstance = createApp({
        render() {
          return h(MapDeparturePin, {}, "Example");
        },
      });
      // Mount the Vue component to the popup
      popupInstance.mount(layer.$el);
    },
    pointToLayer(feature, latlng) {
      return L.circleMarker(latlng, geojsonMarkerOptions);
    },
  }).addTo(map.value.leafletObject);

I think the problem is in popupInstance.mount(layer.$el) but can not find how to fix it.

I can see that $el not defined on console, but don't know what is the right way.