Issue getting Geosearch plugin to work with Leaflet

[chrisgrim]

Hi! Thanks so much for this plugin! I tried installing the vue2-leaflet-geosearch plugin and ran into a bit of a issue. I see that with Vue2Leaflet everything is called by <l-map :zoom="zoom" :center="center">. However when I tried to do the plugin it is now being called by <v-map :zoom=3 :center="location"></v-map>. I tried adding all the code provided with the plugin documentation but I think I am missing something. I am getting a console error : Vue2Leaflet is not defined. Yet I believe I am calling it. Here is my code

<template>
	<div class="create-content">
		<div class="create-title">
    		<h2> Location</h2>
    	</div>

			<v-map :zoom=3 :center="location">
			  <v-tilelayer url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"></v-tilelayer>
			  <!-- IMPORTANT PART HERE -->
			  <v-geosearch :options="geosearchOptions" ></v-geosearch>
			  <!-- /IMPORTANT PART HERE -->
			</v-map>
				
		    <div class="create-button">
		        <button @click.prevent="submitLocation()" class="create"> Next </button>
		    </div>

		</div>
    </div>
</template>
<script>
	import {LMap, LTileLayer, LMarker} from 'vue2-leaflet'
	import { OpenStreetMapProvider } from 'leaflet-geosearch';
	import VGeosearch from 'vue2-leaflet-geosearch';

	Vue.component('v-map', Vue2Leaflet.Map);
	Vue.component('v-tilelayer', Vue2Leaflet.TileLayer);

	export default {

		components: { 
			LMap, 
			LTileLayer, 
			LMarker,
			VGeosearch
		},

		data() {
			return {

				places: [],
				currentPlace: null,
				address: '',
				zoom:13,
				center: L.latLng(45.508, -73.587),
				url:'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
				marker: L.latLng(47.413220, -1.219482),
				markers: [],
				geosearchOptions: { provider: new OpenStreetMapProvider(),},
			}
		},

		methods: {
			

			addMarker(e) {
		  		this.markers.push({latlng: e.latlng});
		  	},

			geolocate() {
				navigator.geolocation.getCurrentPosition(position => {
					this.center = {
						lat: position.coords.latitude,
						lng: position.coords.longitude
					};
				});
			},
		},
};



</script>

and my app.js

import { Icon }  from 'leaflet'
import 'leaflet/dist/leaflet.css'


// this part resolve an issue where the markers would not appear
delete Icon.Default.prototype._getIconUrl;

Icon.Default.mergeOptions({
  iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
  iconUrl: require('leaflet/dist/images/marker-icon.png'),
  shadowUrl: require('leaflet/dist/images/marker-shadow.png')
});

Do I need to make a custom Vue2Leaflet.Map and Vue2Leaflet.TileLayer file? If I remove

	Vue.component('v-map', Vue2Leaflet.Map);
	Vue.component('v-tilelayer', Vue2Leaflet.TileLayer);

The error goes away but then I get the error Unknown custom element:<v-map>