Dynamic redrawing of Yandex.map in Vue 3?

Question

Yandex maps

Hello everyone, I ran into such a problem with the created hook, I draw a map with a label and everything is OK, but when I click on the map itself, I want to redraw it with a new label and with a different center, but the map is not redrawn.
the component itself :

<template>
  <div id="weather-map" @click="onClick"></div>
</template>

<script>
export default {
  name: "Map",
  created() {
    let that = this;
    ymaps.ready(function () {
      that.addNewPlacemark([46.358803, 48.059937], "Астрахань");
    });
  },
  methods: {
    addNewPlacemark(point, hint) {
      let map = new ymaps.Map("weather-map", {
        center: point,
        zoom: 10,
        controls: [],
      });
      map.geoObjects.add(
        new ymaps.Placemark(point, {
          hintContent: hint,
        })
      );
    },
    onClick() {
      let that = this;
      ymaps.ready(function () {
        that.addNewPlacemark([46.865971, 46.865971], "Москва");
      });
    },
  },
};
</script>

Answer 1

Instead of reinitializing, you should update the map center and marker coordinates :
<div ref="map"></div>

data: () => ({
  coords: [ ... ],
}),
methods: {
  initMap() {
    this.map = new ymaps.Map(this.$refs.map, {
      center: this.coords,
      zoom: 8,
    });

    this.marker = new ymaps.Placemark(this.coords, {
      hintContent: 'hello, world!!',
    });

    this.map.geoObjects.add(this.marker);

    this.map.events.add('click', this.onMapClick);

    this.$watch('coords', this.updateMap);
  },
  onMapClick(e) {
    this.coords = e.get('coords');
  },
  updateMap() {
    this.map.panTo(this.coords);
    this.marker.geometry.setCoordinates(this.coords);
  },
},
created() {
  ymaps.ready(this.initMap);
},