Geojson layer disappears after changing the Map Style url

[jxlstudio]

I have a dropdown that changed the map style on change, but whenever I update the style, the boundaries of the outline (Geojson layer) I have pre-drawn disappears. Tried adding a watcher to add the layer back after the style changes, but did not work.

<MglMap :accessToken="accessToken" :mapStyle.sync="mapStyleUrl" :center="centerCoords" :bearing="bearing" :zoom="zoom" :scrollZoom="scrollZoom" :repaint="repaint" container="map" :preserveDrawingBuffer="true" @load="onMapLoad" @mouseup="onMapMove()" logoPosition="bottom-right">
            <MglNavigationControl :compact="compact" position="top-right"/>
            <MglFullscreenControl :compact="compact" position="bottom-right"/>
            <!-- <MglMarker :coordinates="centerCoords"></MglMarker> -->
            <MglMarker v-for="(pin, index) in mapPins" :coordinates="pin.coords" :key="pin.id" draggable @dragend="updatePinCoords" :ref="index">
              <MglPopup :offset="popupOffset">
                <div class="pa-4">
                  <p>{{pin.name}}</p>
                  <p>{{pin.id}}</p>
                  <p>{{pin.coords}}</p>
                  <v-btn @click="deleteMapPin(pin.id)">Delete Pin</v-btn>
                </div>
              </MglPopup>
            </MglMarker>
            <MglGeojsonLayer
              :sourceId="mapLines.data.id"
              :source="mapLines"
              layerId="lines"
              :layer="mapLinesLayer"
            ></MglGeojsonLayer>
        </MglMap>

[jxlstudio]

Any thoughts or updates here? @deepak-geospoc

[vinayakkulkarni]

I'll create a codesandbox which provides a workaround cause this is a bug within Mapbox itself ref: mapbox/mapbox-gl-js#4006 (comment)

[vinayakkulkarni]

https://codesandbox.io/s/v-mapbox-persist-geojson-layer-on-basemap-change-stqc5