JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<script src="https://maps.api.2gis.ru/2.0/loader.js"></script>
<div id="app">
  <div ref="map" class="map"></div>
</div>

CSS

#app {
  position: relative;
}

.map {
  width: 100%;
  height: 400px;
}

JavaScript

new Vue({
  el: '#app',
  data: {
    items: [
      [ 55.733, 37.693 ],
      [ 55.819, 37.591 ],
      [ 55.755, 37.676 ],
      [ 55.762, 37.637 ],
      [ 55.711, 37.729 ],
      [ 55.698, 37.524 ],
      [ 55.782, 37.498 ],
      [ 55.729, 37.465 ],
      [ 55.735, 37.571 ],
    ].map((n, i) => ({ coord: n, id: i + 1 })),
  },
  methods: {
    onPopupOpen(e) {
      e.target
        .getPopup()
        .getElement()
        .querySelector('.leaflet-popup-content-wrapper')
        .addEventListener('dblclick', this.onPopupDblClick);
    },
    onPopupDblClick(e) {
      const
        id = +e.currentTarget.querySelector('[data-id]').dataset.id,
        item = this.items.find(n => n.id === id);

      alert(`id: ${item.id}\ncoord: ${item.coord}`);
    },
  },
  mounted() {
    DG.then(() => {
      this.map = DG.map(this.$refs.map, {
        center: [ 55.00545, 82.96038 ],
        zoom: 14,
        minZoom: 11,
        fullscreenControl: false,
        scrollWheelZoom: false
      });
      this.markers = DG.featureGroup();

      this.items.forEach(({ id, coord }) => {
        DG.marker(coord)
          .addTo(this.markers)
          .bindPopup(DG.popup().setContent(`<div data-id="${id}">${coord}</div>`))
          .once('popupopen', this.onPopupOpen);
      });

      this.markers.addTo(this.map);
      this.map.fitBounds(this.markers.getBounds());
    });
  },
});