Non-mapbox basemaps tiles get disappeared

Here’s my data object:

data() {
    return {
      map: null,
      accessToken: null, // your access token. Needed if you using Mapbox maps
      mapStyle:`https://maps.tilehosting.com/styles/voyager/style.json?key={KEY}`, // your map style
    };
  },

When the map is zoomed, the tiles aren’t being fetched. Demo: https://bit.ly/soal-vue-mapbox

[maximelebreton]

After hours spent on this problem, here is my working solution to access map instance from a store (thanks to https://github.com/vuejs/vue/issues/2637#issuecomment-207076744 and https://github.com/vuejs/vue/issues/2637#issuecomment-331913620):

const state = reactive({
  map: Object.freeze({ wrapper: /* PUT THE MAP INSTANCE HERE */ });
});

Here is an example with Vue Composition Api:

index.js

import { reactive, computed } from "@vue/composition-api";

export const state = reactive({
  map: null
});

export const setMap = (map) => {
  state.map = Object.freeze({ wrapper: map});
};

export const getMap = computed(() => state.map.wrapper);

export const initMap = (event) => {
  setMap(event.map);

  // now you can access to map instance from the "getMap" getter!
  getMap.value.addSource("satellite-source", {
    type: "raster",
    url: "mapbox://mapbox.satellite",
  }); 
  getMap.value.addLayer({
    id: "satellite-layer",
    type: "raster",
    source: "satellite-source"
  });
};

App.vue

<template>
  <MglMap :accessToken="..." :mapStyle="..." @load="onMapLoaded" />
</template>


<script>
import { defineComponent } from "@vue/composition-api";
import { MglMap } from "vue-mapbox";
import { initMap } from "./index.js";

export default defineComponent({
  components: {
    MglMap
  },
  setup() {
    const onMapLoaded = (event) => {
      initMap(event);
    }

    return { onMapLoaded };
  }
});
</script>

[danielholmes]

@vinayakkulkarni My temporary solution was to access the map via refs. e.g.:

<mgl-map ref="mglMap" ... />

this.$refs.mglMap.map.fitBounds(...);