Vue2Leaflet Demo

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue2-leaflet.js"></script>
<body>
  <div id="app">
    <l-map :zoom="zoom" :center="center">
      <l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
      <l-polygon
        v-for="zone in newEvent.zones"
        :lat-lngs="zone.outline"
      >
        <l-popup :options="{ keepInView: true }">Hey I'm a popup. Try to drag me out of frame.</l-popup>
      </l-polygon>
    </l-map>
  </div>
</body>

CSS

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

JavaScript

var { LMap, LTileLayer, LPolygon, LPopup } = Vue2Leaflet;

new Vue({
  el: '#app',
  components: { LMap, LTileLayer, LPolygon, LPopup },
  data() {
    return {
      zoom:13,
      center: [32.73393532222106, -117.14745819568635],
      url:'https://{s}.tile.osm.org/{z}/{x}/{y}.png',
      attribution:'&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
      newEvent: {
        name: null,
        startDateTime: "2018-10-27T22:35:00.000Z",
        endDateTime: "2018-10-27T16:35:34.178-07:00",
        zones: [{
          id: 1,
          name: '',
          outline: [[32.74678779520492, -117.13331009971812], [32.72888298545862, -117.14893366426688], [32.73018264916801, -117.12455403606987]]
        }]
      }
    }
  }
});