performance tweak

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "vue-maplibre-gl",
-	"version": "1.0.0-beta.16",
+	"version": "1.0.0-beta.17",
 	"description": "Vue 3 plugin for maplibre-gl",
 	"keywords": [
 		"vue",

src/components/map.component.ts

@@ -1,4 +1,4 @@
-import { defineComponent, getCurrentInstance, h, onBeforeUnmount, onMounted, PropType, provide, ref, shallowRef, unref, watch } from 'vue';
+import { defineComponent, getCurrentInstance, h, markRaw, onBeforeUnmount, onMounted, PropType, provide, ref, shallowRef, unref, watch } from 'vue';
 import { FitBoundsOptions, LngLatBoundsLike, LngLatLike, Map as MaplibreMap, MapboxOptions, Style, TransformRequestFunction } from 'maplibre-gl';
 import { componentIdSymbol, emitterSymbol, isLoadedSymbol, mapSymbol, MglEvents, sourceIdSymbol } from '@/components/types';
 import { defaults } from '@/components/defaults';
@@ -124,7 +124,7 @@ export default defineComponent({
 
 			// init map
 			// @ts-ignore
-			map.value           = new MaplibreMap(opts);
+			map.value           = markRaw(new MaplibreMap(opts));
 			registryItem.map    = map.value;
 			isInitialized.value = true;
 			boundMapEvents.set('__load', () => (isLoaded.value = true, registryItem.isLoaded = true));

src/components/mapRegistry.ts

@@ -1,6 +1,6 @@
 import { MglMap } from '@/components/index';
 import maplibregl from 'maplibre-gl';
-import { reactive } from 'vue';
+import { markRaw, reactive } from 'vue';
 
 export interface MapInstance {
 	component?: InstanceType<typeof MglMap>;
@@ -30,8 +30,8 @@ export function registerMap(instance: InstanceType<typeof MglMap>, key: symbol |
 	}
 	component.isLoaded  = false;
 	component.isMounted = false;
-	component.component = instance;
-	component.map       = instance.map as maplibregl.Map;
+	component.component = markRaw(instance);
+	component.map       = markRaw(instance.map as maplibregl.Map);
 	component.isLoaded  = (instance.map as maplibregl.Map)?.loaded() || false;
 
 	return component;