vue2-leaflet-locatecontrol Error: max2 is undefined

I am using vue2-leaflet in my vue component. I am facing issue when using vue2-leaflet-locationcontrol. When I allow the browser to allow location access in the console i get the error

TypeError: max2 is undefined

Here is the sample code in the component:

<l-map :zoom="zoom" :center="center" :bounds="bounds">
   <l-tile-layer :url="url" :attribution="attribution" :no-wrap="true"></l-tile-layer>
   <l-marker :lat-lng="marker" :draggable="true" @update:lat-lng="updateMarker"></l-marker>
   <v-geosearch :options="geosearchOptions" @showlocation="showLocation"></v-geosearch>
   <v-locatecontrol />
</l-map>

import in component

import { LMap, LTileLayer, LMarker } from "vue2-leaflet";
import { OpenStreetMapProvider } from "leaflet-geosearch";
import VGeosearch from "vue2-leaflet-geosearch";
import VLocatecontrol from "vue2-leaflet-locatecontrol";

import in main.js

import L from 'leaflet';

L.Icon.Default.imagePath = '/themes/storefront/assets/public/image/';
L.Icon.Default.mergeOptions({
    iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png').split("/")[5],
    iconUrl: require('leaflet/dist/images/marker-icon-2x.png').split("/")[5],
    shadowUrl: require('leaflet/dist/images/marker-shadow.png').split("/")[5],
});
import 'leaflet/dist/leaflet.css';
import 'leaflet-geosearch/assets/css/leaflet.css';

What I am doing wrong?