Vue2Leaflet Demo

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<script src="https://unpkg.com/leaflet@1.5.0/dist/leaflet.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.0/dist/leaflet.css">
<script src="https://unpkg.com/vue2-leaflet@2.2.1/dist/vue2-leaflet.min.js"></script>
<body>
  <div id="app">
    <l-map :zoom="zoom" :center="center">
      <l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
      <l-marker :lat-lng="marker">
        <l-icon>
          <div class="mydiv">
            <span @click="sayHello('hello')" class="myspan">
              HELLO</span><br />
            <span @click="sayHello('goodbye')" class="myspan">
              Goodbye</span>
          </div>
        </l-icon>
      </l-marker>
    </l-map>
  </div>
</body>

CSS

html,
body,
#app {
  height: 100%;
  margin: 0;
}

.mydiv {
  padding: 10px;
  min-width: 100px;
  background-color: red;
}

.myspan:hover {
  background-color: white;
}

JavaScript

var {
  LMap,
  LTileLayer,
  LMarker,
  LIcon
} = Vue2Leaflet;

new Vue({
  el: '#app',
  components: {
    LMap,
    LTileLayer,
    LMarker,
    LIcon
  },
  data() {
    return {
      zoom: 13,
      center: L.latLng(47.413220, -1.219482),
      url: 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
      attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
      marker: L.latLng(47.413220, -1.219482),
    }
  },
  methods: {
    sayHello(greet) {
      alert(greet)
    }
  }
});