@load function makes maps irresponsive

[jmoidunny]

<MglMap :accessToken="accessToken" :mapStyle="mapStyle" :hash="true" :attributionControl="false" @load="onMapLoaded" >

onMapLoaded(event){ this.mapbox = event.map }

then when try to do zoom-in zoom-out map get destroyed

[thom4parisot]

I encountered a comparable issue: when I drag the viewport, the styles get messed up. When the map is not stored as a Vue data, everything is alright.

I wonder why?

[rognstad]

If the map is stored in your component's data, then Vue adds a bunch of watchers for reactivity. That breaks the map. You can keep a reference to the map in your component like so:

created() { this.map = null; },

And then set this.map equal to the map you get in your @load handler.