Как инициализировать карту один раз на Vue, но использовать на разных роутах Vue?

1 пункт можно пояснить, пожалуйста? Почему?
И то есть карта будет инициализирована 2 раза все равно? (Хоть и после удаляется)
Никак нельзя ее один раз инициализировать для всего проекта?

Если передать id, то компонент при отрисовке будет искать контейнер для карты не внутри своего узла, а по всему DOM. Если ваш id не уникален для каждого нового экземпляра, то DG может попытаться инициализировать карту второй раз, да ещё и вне компонента – отсюда и ошибки.

Инициализировать один раз можно, но это уже не компонент, а директива. Решение, мягко говоря, не очень элегантное, но выглядеть оно будет как-то так:

Vue.directive('dg-map', (() => {
  let map = null
  return {
    inserted (el) {
      if (map) {
        el.appendChild(map)
      } else {
        map = document.createElement('div')
        el.appendChild(map)
        DG.map(map)
      }
    }
  }
})())

Не факт, что оно заработает, кстати. 2gis может отвалиться, если элемент карты на некоторое время останется без узла-родителя (скажем, при переходе с одной страницы на другую).

Даниил Братухин, пытался сделать через ссылку, так вообще только в одном месте создается карта. И в консоли пишет - contMap.vue?c8fb:47 Uncaught (in promise) TypeError: Cannot read property '$refs' of undefined
at eval (contMap.vue?c8fb:47)

danilr, посмотрите пример - у меня всё работает. Ошибка где-то в вашем коде (было бы неплохо на него взглянуть, кстати).

Даниил Братухин,

<div class="contacts-box">
            <p class="contacts-key">Эл. почта:</p>
            <p class="contacts-value">info@scp-omsk.ru </p>
        </div>

    </div>
    <div class="map-wrapper">
        <div ref="cap" style="width:100%; height:100%"></div>
    </div>
</div>
</template>

<script>
import DG from '2gis-maps'
// var DG = require('2gis-maps')
export default {
    data(){
        return{
            map: null
        }
    },
    mounted(){
        DG.then(function () {
            this.map = DG.map(this.$refs.cap, {
                center: [54.966613, 73.439596],
                zoom: 13,
                // zoomControl: false,
                minZoom: 10,
                fullscreenControl: false,
                scrollWheelZoom: false
            });
            var myDivIcon = DG.divIcon({
                iconSize: [57, 77],
                className: "marker-custom",
                iconAnchor: [28.5, 70],
                html: '<img class="marker-img" src="img/marker.svg">'

            });
            DG.marker([54.966613, 73.439596], {
                icon: myDivIcon
            }).addTo(this.map);
            // DG.control.zoom({position: 'bottomleft'}).addTo(map);
        });
    },
  beforeDestroy () {
    if (this.map) this.map.remove()
  }
}
</script>

У меня компонент не только карта, поэтомы на весь компонент не могу сделать (this.$el)

danilr, в вашем случае не нужно оборачивать инициализацию в DG.then() (см. документацию). Плюс this внутри функции undefined, но это уже не так важно.

Даниил Братухин, Друг, помоги разобраться пожалуйста)
Я убрал обертку DG.then, теперь работает на всех роутах, но опять ошибка такая
script.full.js?194a:15 Uncaught (in promise) Error: Map container not found.

У меня такое ощущение, что скрипт 2гиса ищет сам контейнер с id map, как исправить?