Vue.js инициализирует пользовательский компонент только один раз и использует его в качестве основы для нескольких представлений

Я создал компонент vue на основе MapBox, который ограничен в инициализации до того, как он будет стоить денег, и это совершенно нормально. Но я хочу уменьшить количество повторных инициализаций моего компонента карты ради них и себя. Вот почему я подумал, можно ли один раз определить компонент, передать некоторые свойства, а затем обрабатывать состояние через vuex.

Прямо сейчас мне пришлось бы импортировать свой компонент и добавить данные следующим образом:

<Map
  :sources = "geoData.sources"
  :layers = "geoData.layers"
  :mapOptions = "mapOptions"
  :componentOptions = "{ drawingEnabled: toggleMapDrawing, activeLayers: activeMapLayers, activeMarkerGroups: [] }"
  @loaded = "onMapLoaded" @selectedMarkers = "onSelectedObjects"/>

За componentOptions наблюдают, поэтому компонент соответствующим образом меняет свое состояние. Мои идеи/подходы до сих пор были следующими:

1. Я подумал о добавлении приведенного выше фрагмента в корневой файл vue, но это не поможет, так как я хочу динамически, а не статически размещать компонент карты перед остальным содержимым страницы.
2. Передача визуализированного компонента vue в переменную и добавление его позже было бы слишком хакерским, если это вообще возможно.
3. Используя слоты, но из того, что я видел в документах, невозможно использовать компонент с слотами из родительского компонента в таком дочернем элементе.
4. Лучшая идея, которая пришла мне в голову, заключалась в том, чтобы определить фактическую переменную MapBox (которая, я полагаю, запускает API для инициализации), а затем сохранить ее глобально, используя хранилище или что-то в этом роде. Но так как это немедленно добавит компонент к элементу DOM, который будет указан в параметрах, поэтому мне также нужно будет как-то его сохранить.

Инициализация карты происходит в смонтированном хуке компонента и выглядит так:

const baseOptions = {
  accessToken: process.env.MAPBOX_TOKEN,
  container: 'map',
  style: process.env.MAPBOX_STYLE_URL,
  minZoom: 10,
  maxZoom: 20,
  zoom: 13,
  bearing: 150,
  pitch: 50
}
this.map = new mapboxgl.Map(Object.assign(baseOptions, this.mapOptions))
if (!this.map) { throw new Error('Could not create map. Make sure the token is valid.') }

Я могу ошибаться, может быть, есть лучший способ, или, может быть, вся эта идея может быть мусором, но, надеюсь, это не так. Также обратите внимание, что я не использую модуль vue-mapbox, потому что он больше не поддерживается.

Буду благодарен за любые идеи и подсказки :)