Unwanted interaction between two maps on same page (single-page application)

[YoungFaithful]

I use vuelayers in nuxt (with the recommended config from the documentation) and the following map components:

<template>
  <vl-map id="map-country" style="height: 400px">
    <vl-view id="view-country" :zoom.sync="zoom" :center.sync="center"/>
    <vl-interaction-select  id="selectcountries" :features.sync="features" source="the-source" :z-index="2"/>
    <vl-layer-vector id="layer-country" :z-index="1">
      <vl-source-vector url="https://openlayers.org/en/latest/examples/data/geojson/countries.geojson" ident="the-source"/>
    </vl-layer-vector>
    <vl-layer-tile id="osm-country" :z-index="0">
      <vl-source-osm/>
    </vl-layer-tile>
  </vl-map>
</template>

<script>
  export default {
    name: 'MapCountry',
    data () {
      return {
        zoom: 2,
        center: [0, 0],
        features: [],
        done: false,
      }
    },
    methods: {
     reset() {
      this.features = []
      this.done = false
     },
    }
  }
</script>

<template>
  <vl-map id="map-polygon" style="height: 400px">
    <vl-view id="view-polygon" :zoom.sync="zoom" :center.sync="center"/>

    <vl-layer-vector id="layer-polygon" :z-index="1">
      <vl-source-vector :features.sync="features" ident="the-source"/>
      <vl-style-box>
        <vl-style-stroke color="green"/>
        <vl-style-fill color="rgba(255,255,255,0.5)"/>
      </vl-style-box>
    </vl-layer-vector>

    <vl-interaction-draw id="interaction-polygon" type="Polygon" source="the-source" @drawend="handleDrawend" v-if="!done">
      <vl-style-box>
        <vl-style-stroke color="black"/>
        <vl-style-fill color="rgba(255,255,255,0.5)"/>
      </vl-style-box>
    </vl-interaction-draw>
    <vl-layer-tile id="osm-polygon" :z-index="0">
      <vl-source-osm/>
    </vl-layer-tile>
  </vl-map>
</template>

<script>
  export default {
    name: 'MapPolygon',
    data () {
      return {
        zoom: 2,
        center: [0, 0],
        features: [],
        done: false,
      }
    },
    methods: {
     reset() {
      this.features = []
      this.done = false
     },
     handleDrawend() {
      this.done = true
      this.$emit('polygon', this.features[0].geometry.coordinates[0])
     }
    }
  }
</script>

They both work fine on separate pages (I assume due to the other window). However, integrating them on the same single-page leads to unwanted interaction: This is expected for MapCountry: and this for the MapPolygon: This is what happens when first using MapCountry and using MapPolygon afterwards:

What do I do wrong? I'd highly appreciate your feedback and thank you for the great project!

[YoungFaithful]

Sorry. I just came up with the solution after thinking about it for the last few hours: I used the same ident="the-source'

[ghettovoice]

Hello @YoungFaithful , yes, you are right. The reason is because you used same ident on two maps at the same time. ident allows to share underlying OpenLayers instance between multiple components, like with draw/modify interactions or synchronized view for multiple maps.