How to initialize a map once in Vue but use it on different Vue routes?

Question

Vue.js

The situation is this - I connected 2gis to SPA Vue, inserted it into the component (I initialize it in mounted in the component) and use this component on different VueRouter pages. Everything works, but in the console it gives an error that the map has already been initialized. How to do it right?

Answer 1

1) make sure you instantiate DG.Map with a reference to the DOM element, not its ID
2) don't forget to destroy the created instance in beforeDestroy

export default {
  data: () => ({
    map: null
  }),
  mounted () {
    this.map = new DG.map(this.$el)
  },
  beforeDestroy () {
    if (this.map) this.map.remove()
  }
}