diff --git a/package.json b/package.json
index c2849a7..59a571c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "vue-maplibre-gl",
-	"version": "1.0.0-beta.18",
+	"version": "1.0.0-beta.19",
 	"description": "Vue 3 plugin for maplibre-gl",
 	"keywords": [
 		"vue",
diff --git a/src/components/layers/circle.layer.ts b/src/components/layers/circle.layer.ts
index 5b1d428..d692399 100644
--- a/src/components/layers/circle.layer.ts
+++ b/src/components/layers/circle.layer.ts
@@ -1,6 +1,6 @@
 import { CircleLayer, CircleLayout, CirclePaint } from 'maplibre-gl';
-import { genLayerOpts, Shared } from '@/components/layers/shared';
-import { createCommentVNode, defineComponent, inject, onBeforeUnmount, PropType, warn, watch } from 'vue';
+import { genLayerOpts, registerLayerEvents, Shared, unregisterLayerEvents } from '@/components/layers/shared';
+import { createCommentVNode, defineComponent, getCurrentInstance, inject, onBeforeUnmount, PropType, warn, watch } from 'vue';
 import { componentIdSymbol, isLoadedSymbol, mapSymbol, sourceIdSymbol } from '@/components/types';
 import { getSourceRef } from '@/components/sources/shared';
 
@@ -20,7 +20,8 @@ export default defineComponent({
 			return;
 		}
 
-		const map       = inject(mapSymbol)!,
+		const ci        = getCurrentInstance()!,
+			  map       = inject(mapSymbol)!,
 			  isLoaded  = inject(isLoadedSymbol)!,
 			  cid       = inject(componentIdSymbol)!,
 			  sourceRef = getSourceRef(cid, props.source || sourceId);
@@ -28,14 +29,15 @@ export default defineComponent({
 		watch([ isLoaded, sourceRef ], ([ il, src ]) => {
 			if (il && (src || src === undefined)) {
 				map.value.addLayer(genLayerOpts<CircleLayer>(props.layerId, 'circle', props, sourceId), props.before || undefined);
+				registerLayerEvents(map.value, props.layerId, ci.vnode);
 			}
 		}, { immediate: true });
 
 		onBeforeUnmount(() => {
-			if (isLoaded.value) map.value.removeLayer(props.layerId);
+			map.value.removeLayer(props.layerId);
+			unregisterLayerEvents(map.value, props.layerId, ci.vnode);
 		});
 
-
 	},
 	render() {
 		return createCommentVNode('Circle Layer');
diff --git a/src/components/layers/fill.layer.ts b/src/components/layers/fill.layer.ts
index 1a849df..48daab9 100644
--- a/src/components/layers/fill.layer.ts
+++ b/src/components/layers/fill.layer.ts
@@ -1,6 +1,6 @@
 import { FillLayer, FillLayout, FillPaint } from 'maplibre-gl';
-import { genLayerOpts, Shared } from '@/components/layers/shared';
-import { createCommentVNode, defineComponent, inject, onBeforeUnmount, PropType, warn, watch } from 'vue';
+import { genLayerOpts, registerLayerEvents, Shared, unregisterLayerEvents } from '@/components/layers/shared';
+import { createCommentVNode, defineComponent, getCurrentInstance, inject, onBeforeUnmount, PropType, warn, watch } from 'vue';
 import { componentIdSymbol, isLoadedSymbol, mapSymbol, sourceIdSymbol } from '@/components/types';
 import { getSourceRef } from '@/components/sources/shared';
 
@@ -20,7 +20,8 @@ export default defineComponent({
 			return;
 		}
 
-		const map       = inject(mapSymbol)!,
+		const ci        = getCurrentInstance()!,
+			  map       = inject(mapSymbol)!,
 			  isLoaded  = inject(isLoadedSymbol)!,
 			  cid       = inject(componentIdSymbol)!,
 			  sourceRef = getSourceRef(cid, props.source || sourceId);
@@ -28,14 +29,17 @@ export default defineComponent({
 		watch([ isLoaded, sourceRef ], ([ il, src ]) => {
 			if (il && (src || src === undefined)) {
 				map.value.addLayer(genLayerOpts<FillLayer>(props.layerId, 'fill', props, sourceId), props.before || undefined);
+				registerLayerEvents(map.value, props.layerId, ci.vnode);
 			}
 		}, { immediate: true });
 
 		onBeforeUnmount(() => {
-			if (isLoaded.value) map.value.removeLayer(props.layerId);
+			if (isLoaded.value) {
+				map.value.removeLayer(props.layerId);
+				unregisterLayerEvents(map.value, props.layerId, ci.vnode);
+			}
 		});
 
-
 	},
 	render() {
 		return createCommentVNode('Fill Layer');
diff --git a/src/components/layers/fillExtrusion.layer.ts b/src/components/layers/fillExtrusion.layer.ts
index 4c32124..43ed664 100644
--- a/src/components/layers/fillExtrusion.layer.ts
+++ b/src/components/layers/fillExtrusion.layer.ts
@@ -1,6 +1,6 @@
 import { FillExtrusionLayout, FillExtrusionPaint, LineLayer } from 'maplibre-gl';
-import { genLayerOpts, Shared } from '@/components/layers/shared';
-import { createCommentVNode, defineComponent, inject, onBeforeUnmount, PropType, warn, watch } from 'vue';
+import { genLayerOpts, registerLayerEvents, Shared, unregisterLayerEvents } from '@/components/layers/shared';
+import { createCommentVNode, defineComponent, getCurrentInstance, inject, onBeforeUnmount, PropType, warn, watch } from 'vue';
 import { componentIdSymbol, isLoadedSymbol, mapSymbol, sourceIdSymbol } from '@/components/types';
 import { getSourceRef } from '@/components/sources/shared';
 
@@ -20,7 +20,8 @@ export default defineComponent({
 			return;
 		}
 
-		const map       = inject(mapSymbol)!,
+		const ci        = getCurrentInstance()!,
+			  map       = inject(mapSymbol)!,
 			  isLoaded  = inject(isLoadedSymbol)!,
 			  cid       = inject(componentIdSymbol)!,
 			  sourceRef = getSourceRef(cid, props.source || sourceId);
@@ -28,14 +29,17 @@ export default defineComponent({
 		watch([ isLoaded, sourceRef ], ([ il, src ]) => {
 			if (il && (src || src === undefined)) {
 				map.value.addLayer(genLayerOpts<LineLayer>(props.layerId, 'fill-extrusion', props, sourceId), props.before || undefined);
+				registerLayerEvents(map.value, props.layerId, ci.vnode);
 			}
 		}, { immediate: true });
 
 		onBeforeUnmount(() => {
-			if (isLoaded.value) map.value.removeLayer(props.layerId);
+			if (isLoaded.value) {
+				map.value.removeLayer(props.layerId);
+				unregisterLayerEvents(map.value, props.layerId, ci.vnode);
+			}
 		});
 
-
 	},
 	render() {
 		return createCommentVNode('Fill Extrusion Layer');
diff --git a/src/components/layers/heatmap.layer.ts b/src/components/layers/heatmap.layer.ts
index 1d919ce..46a3f82 100644
--- a/src/components/layers/heatmap.layer.ts
+++ b/src/components/layers/heatmap.layer.ts
@@ -1,6 +1,6 @@
 import { HeatmapLayer, HeatmapLayout, HeatmapPaint } from 'maplibre-gl';
-import { genLayerOpts, Shared } from '@/components/layers/shared';
-import { createCommentVNode, defineComponent, inject, onBeforeUnmount, PropType, warn, watch } from 'vue';
+import { genLayerOpts, registerLayerEvents, Shared, unregisterLayerEvents } from '@/components/layers/shared';
+import { createCommentVNode, defineComponent, getCurrentInstance, inject, onBeforeUnmount, PropType, warn, watch } from 'vue';
 import { componentIdSymbol, isLoadedSymbol, mapSymbol, sourceIdSymbol } from '@/components/types';
 import { getSourceRef } from '@/components/sources/shared';
 
@@ -20,7 +20,8 @@ export default defineComponent({
 			return;
 		}
 
-		const map       = inject(mapSymbol)!,
+		const ci        = getCurrentInstance()!,
+			  map       = inject(mapSymbol)!,
 			  isLoaded  = inject(isLoadedSymbol)!,
 			  cid       = inject(componentIdSymbol)!,
 			  sourceRef = getSourceRef(cid, props.source || sourceId);
@@ -28,14 +29,17 @@ export default defineComponent({
 		watch([ isLoaded, sourceRef ], ([ il, src ]) => {
 			if (il && (src || src === undefined)) {
 				map.value.addLayer(genLayerOpts<HeatmapLayer>(props.layerId, 'heatmap', props, sourceId), props.before || undefined);
+				registerLayerEvents(map.value, props.layerId, ci.vnode);
 			}
 		}, { immediate: true });
 
 		onBeforeUnmount(() => {
-			if (isLoaded.value) map.value.removeLayer(props.layerId);
+			if (isLoaded.value) {
+				map.value.removeLayer(props.layerId);
+				unregisterLayerEvents(map.value, props.layerId, ci.vnode);
+			}
 		});
 
-
 	},
 	render() {
 		return createCommentVNode('Heatmap Layer');
diff --git a/src/components/layers/hillshade.layer.ts b/src/components/layers/hillshade.layer.ts
index 0ae0cbd..cda2b39 100644
--- a/src/components/layers/hillshade.layer.ts
+++ b/src/components/layers/hillshade.layer.ts
@@ -1,6 +1,6 @@
 import { HillshadeLayer, HillshadeLayout, HillshadePaint } from 'maplibre-gl';
-import { genLayerOpts, Shared } from '@/components/layers/shared';
-import { createCommentVNode, defineComponent, inject, onBeforeUnmount, PropType, warn, watch } from 'vue';
+import { genLayerOpts, registerLayerEvents, Shared, unregisterLayerEvents } from '@/components/layers/shared';
+import { createCommentVNode, defineComponent, getCurrentInstance, inject, onBeforeUnmount, PropType, warn, watch } from 'vue';
 import { componentIdSymbol, isLoadedSymbol, mapSymbol, sourceIdSymbol } from '@/components/types';
 import { getSourceRef } from '@/components/sources/shared';
 
@@ -20,7 +20,8 @@ export default defineComponent({
 			return;
 		}
 
-		const map       = inject(mapSymbol)!,
+		const ci        = getCurrentInstance()!,
+			  map       = inject(mapSymbol)!,
 			  isLoaded  = inject(isLoadedSymbol)!,
 			  cid       = inject(componentIdSymbol)!,
 			  sourceRef = getSourceRef(cid, props.source || sourceId);
@@ -28,14 +29,17 @@ export default defineComponent({
 		watch([ isLoaded, sourceRef ], ([ il, src ]) => {
 			if (il && (src || src === undefined)) {
 				map.value.addLayer(genLayerOpts<HillshadeLayer>(props.layerId, 'hillshade', props, sourceId), props.before || undefined);
+				registerLayerEvents(map.value, props.layerId, ci.vnode);
 			}
 		}, { immediate: true });
 
 		onBeforeUnmount(() => {
-			if (isLoaded.value) map.value.removeLayer(props.layerId);
+			if (isLoaded.value) {
+				map.value.removeLayer(props.layerId);
+				unregisterLayerEvents(map.value, props.layerId, ci.vnode);
+			}
 		});
 
-
 	},
 	render() {
 		return createCommentVNode('Hillshade Layer');
diff --git a/src/components/layers/line.layer.ts b/src/components/layers/line.layer.ts
index 2eb11bb..0c74935 100644
--- a/src/components/layers/line.layer.ts
+++ b/src/components/layers/line.layer.ts
@@ -41,7 +41,6 @@ export default defineComponent({
 			}
 		});
 
-
 	},
 	render() {
 		return createCommentVNode('Line Layer');
diff --git a/src/components/layers/raster.layer.ts b/src/components/layers/raster.layer.ts
index 67f3490..731cb51 100644
--- a/src/components/layers/raster.layer.ts
+++ b/src/components/layers/raster.layer.ts
@@ -1,6 +1,6 @@
 import { RasterLayer, RasterLayout, RasterPaint } from 'maplibre-gl';
-import { genLayerOpts, Shared } from '@/components/layers/shared';
-import { createCommentVNode, defineComponent, inject, onBeforeUnmount, PropType, warn, watch } from 'vue';
+import { genLayerOpts, registerLayerEvents, Shared, unregisterLayerEvents } from '@/components/layers/shared';
+import { createCommentVNode, defineComponent, getCurrentInstance, inject, onBeforeUnmount, PropType, warn, watch } from 'vue';
 import { componentIdSymbol, isLoadedSymbol, mapSymbol, sourceIdSymbol } from '@/components/types';
 import { getSourceRef } from '@/components/sources/shared';
 
@@ -20,7 +20,8 @@ export default defineComponent({
 			return;
 		}
 
-		const map       = inject(mapSymbol)!,
+		const ci        = getCurrentInstance()!,
+			  map       = inject(mapSymbol)!,
 			  isLoaded  = inject(isLoadedSymbol)!,
 			  cid       = inject(componentIdSymbol)!,
 			  sourceRef = getSourceRef(cid, props.source || sourceId);
@@ -28,14 +29,17 @@ export default defineComponent({
 		watch([ isLoaded, sourceRef ], ([ il, src ]) => {
 			if (il && (src || src === undefined)) {
 				map.value.addLayer(genLayerOpts<RasterLayer>(props.layerId, 'raster', props, sourceId), props.before || undefined);
+				registerLayerEvents(map.value, props.layerId, ci.vnode);
 			}
 		}, { immediate: true });
 
 		onBeforeUnmount(() => {
-			if (isLoaded.value) map.value.removeLayer(props.layerId);
+			if (isLoaded.value) {
+				map.value.removeLayer(props.layerId);
+				unregisterLayerEvents(map.value, props.layerId, ci.vnode);
+			}
 		});
 
-
 	},
 	render() {
 		return createCommentVNode('Raster Layer');
diff --git a/src/components/layers/smybol.layer.ts b/src/components/layers/smybol.layer.ts
index 4c35a27..2c22ae9 100644
--- a/src/components/layers/smybol.layer.ts
+++ b/src/components/layers/smybol.layer.ts
@@ -1,6 +1,6 @@
 import { SymbolLayer, SymbolLayout, SymbolPaint } from 'maplibre-gl';
-import { genLayerOpts, Shared } from '@/components/layers/shared';
-import { createCommentVNode, defineComponent, inject, onBeforeUnmount, PropType, warn, watch } from 'vue';
+import { genLayerOpts, registerLayerEvents, Shared, unregisterLayerEvents } from '@/components/layers/shared';
+import { createCommentVNode, defineComponent, getCurrentInstance, inject, onBeforeUnmount, PropType, warn, watch } from 'vue';
 import { componentIdSymbol, isLoadedSymbol, mapSymbol, sourceIdSymbol } from '@/components/types';
 import { getSourceRef } from '@/components/sources/shared';
 
@@ -20,7 +20,8 @@ export default defineComponent({
 			return;
 		}
 
-		const map       = inject(mapSymbol)!,
+		const ci        = getCurrentInstance()!,
+			  map       = inject(mapSymbol)!,
 			  isLoaded  = inject(isLoadedSymbol)!,
 			  cid       = inject(componentIdSymbol)!,
 			  sourceRef = getSourceRef(cid, props.source || sourceId);
@@ -28,14 +29,17 @@ export default defineComponent({
 		watch([ isLoaded, sourceRef ], ([ il, src ]) => {
 			if (il && (src || src === undefined)) {
 				map.value.addLayer(genLayerOpts<SymbolLayer>(props.layerId, 'symbol', props, sourceId), props.before || undefined);
+				registerLayerEvents(map.value, props.layerId, ci.vnode);
 			}
 		}, { immediate: true });
 
 		onBeforeUnmount(() => {
-			if (isLoaded.value) map.value.removeLayer(props.layerId);
+			if (isLoaded.value) {
+				map.value.removeLayer(props.layerId);
+				unregisterLayerEvents(map.value, props.layerId, ci.vnode);
+			}
 		});
 
-
 	},
 	render() {
 		return createCommentVNode('Symbol Layer');