title: How to access and add polylines to multiple maps using vue2leaflet
body: <p>I'm trying to create a page containing multiple maps with polylines by using v-for. I tried to use the leaflet:load event to call a method after the map has been loaded, but the event doesn't seem to exist. </p>
  
  <p>Here is my idea, although I know it doesn't work.</p>
  
  <p>Does anyone have some suggestions on how I could accomplish this?</p>
  
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          &lt;div v-for="map in maps" :key="map.id"&gt;
              &lt;l-map style="height:500px; width:500px" 
                     @leaflet:load="insertPolyline"&gt;
                  &lt;l-tile-layer :url="url" :attribution="attribution"/&gt;
              &lt;/l-map&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script &gt;
  import { LMap, LPolyline, LTileLayer} from 'vue2-leaflet';
  
  export default {
  components: {
      LMap,
      LPolyline,
      LTileLayer
    },
  data() {
      return {
          mapsLoaded: false,
          maps: [],
          url:'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
          attribution:'&amp;copy; &lt;a href="http://osm.org/copyright"&gt;OpenStreetMap&lt;/a&gt; 
                       contributors',
      }
  },
  
  mounted() {
      this.maps.push('test1')
      this.maps.push('test2')
      this.maps.push('test3')
  },
  
  methods: {
      insertPolyline: function(event) {
          this.$nextTick(() =&gt; {
              var map = event.target.mapObject
              var polyline = require( 'google-polyline' )
              var points = polyline.decode( '_p~iF~ps|U_ulLnnqC_mqNvxq`@' )
              L.polyline(points, {
              color: 'blue',
              weight: 5,
              opacity: .7,
              lineJoin: 'round'
              }).addTo(map);
              map.fitBounds(points);
          })
      }
  }
  }
  &lt;/script&gt;
  &lt;style&gt;
   @import "~leaflet/dist/leaflet.css";
  &lt;/style&gt;
  </code></pre>