Vue2Leaflet and esri-leaflet

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v1.0.0-rc.1/leaflet.css">
<script src="http://cdn.leafletjs.com/leaflet/v1.0.0-rc.1/leaflet-src.js"></script>
<script src="https://cdn.jsdelivr.net/leaflet.esri/2.0.0/esri-leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Vue2Leaflet/1.0.2/vue2-leaflet.min.js"></script>
<body>
  <div id="app">
      <div>
            <l-map style="height:400px;background-color: rgb(123, 173, 223);" ref="map" :zoom=2 :center="[0.02, 36.9]">

            <l-marker :key="2" :lat-lng="[0.02, 36.9]">
              <l-popup :content="'Example tooltip'"></l-popup>
            </l-marker>
         </l-map>

      </div>
</div>
</body>

JavaScript

var { LMap, LTileLayer, LGeoJson, LMarker, LPopup } = Vue2Leaflet;

new Vue({
  el: '#app',
  components: {
    LMap,
    LTileLayer,
    LGeoJson,
    LMarker,
    LPopup
  },
  data () {
    return {
      
    }
  },
  mounted() {
    
    const UNbaseMap = L.esri.tiledMapLayer({
      url: 'https://uneplivemapservices.unep.org/arcgis/rest/services/UNBASEMAP_Tiled/MapServer',
      maxZoom: 5,
      minZoom: 2
      });
    
    this.$refs.map.mapObject.addLayer(UNbaseMap);
  
  }
});