Одиночный экземпляр компонента в vuejs

Question

У меня есть базовая карта openlayers в компоненте vue:

<template>
  <div id="map" style="width: 300px; height: 200px;"></div>
</template>

<script>
import Map from 'ol/Map.js';
import View from 'ol/View.js';
import TileLayer from 'ol/layer/Tile.js';
import OSM from 'ol/source/OSM.js';
export default {
  mounted() {
     var map = new Map({
        layers: [
          new TileLayer({
            source: new OSM(),
          }),
        ],
        target: 'map',
        view: new View({
          center: [0, 0],
          zoom: 2,
        }),
      });
  },
};
</script>

Теперь я хотел бы повторно использовать этот компонент на нескольких страницах моего SPA, потому что я хотел бы избежать перезагрузки плиток и поддерживать функциина карте.Обычно (если не карта, а только общие данные) я мог бы просто оставить состояние данных в хранилище vuex или в другом месте, но так как этот объект openlayers связан с этим конкретным div 'map', я не могу видеть, что это возможно,Я попробовал элемент Vue, но не повезло.Так как обойти это?