0xD34F

Не нужно дёргать карту напрямую. Сделайте массив с данными маркеров, заполняйте его по клику, и на его основе создавайте экземпляры компонента маркера:

import { yandexMap, ymapMarker, loadYmap } from 'vue-yandex-maps';

components: {
  yandexMap,
  ymapMarker,
},
data: () => ({
  coords: null,
  markers: [],
  settings: { /* ... */ },
}),
methods: {
  onClick(e) {
    this.markers.push({
      id: 1 + Math.max(0, ...this.markers.map(n => n.id)),
      coords: e.get('coords'),
    });
  },
},
async mounted() {
  await loadYmap({ ...this.settings, debug: true });

  ymaps.geolocation.get().then(res => {
    this.coords = res.geoObjects.position;
  });
},

<yandex-map
  v-if="coords"
  :coords="coords"
  @click="onClick"
>
  <ymap-marker
    v-for="n in markers"
    :key="n.id"
    :marker-id="n.id"
    :coords="n.coords"
  ></ymap-marker>
</yandex-map>

https://jsfiddle.net/f65hraxk/

marker.geometry.setCoordinates

<Placemark
  options={{
    iconLayout: 'default#image',
    iconImageHref: 'здесь путь к вашей картинке',
  }}
/>

https://codesandbox.io/s/polished-rgb-m430d?file=/...

Если надо обновлять координаты после перемещения, то слушаете событие boundschange:

map.events.add('boundschange', function() {
  map.balloon.setPosition(map.getCenter());
});

Во время перемещения - слушаете actiontickcomplete:

map.events.add('actiontickcomplete', function(e) {
  const { globalPixelCenter, zoom } = e.get('tick');
  map.balloon.setPosition(map.options.get('projection').fromGlobalPixels(globalPixelCenter, zoom));
});

jsfiddle.net/da9ux62p/1

могу получить координаты

ну тогда нет проблем выполнить обратное геокодирование

SuggestView

есть демо

jsfiddle.net/6jwafb1m

По-видимому, при каждом рендере назначается новый обработчик клика. Потому что назначаете вы его неправильно. Вместо получения экземпляра маркера и вызова events.add, передавайте onClick в Placemark; объект с данными (city, address и т.д.) унесите в properties и получайте его внутри обработчика:

const onPlacemarkClick = e => {
  const placemarkData = e.get('target').properties.get('placemarkData');
  ...
};

<Placemark
  onClick={onPlacemarkClick}
  properties={{
    placemarkData: {
      city: point.City,
      address: point.Address,
      ...
    },
    ...
  }}
  ...
/>

map.panTo(...).then(() => map.setZoom(...))

https://jsfiddle.net/q5ujt4Lh/

Или, замените panTo на setCenter - вторым параметром он принимает масштаб.

let
  map = null,
  marker = null;

document.addEventListener('click', function(e) {
  if (!e.target.classList.contains('contacts__address--link')) {
    return;
  }

  e.preventDefault();

  const
    addressData = e.target.closest('.js-address').dataset,
    coord = [ addressData.longtitude, addressData.latitude ];

  if (!map) {
    map = new ymaps.Map('map', {
      center: coord,
      zoom: 17,
    });

    marker = new ymaps.Placemark(coord);

    map.geoObjects.add(marker);
    map.behaviors.disable('scrollZoom');
  } else {
    map.setCenter(coord);
    marker.geometry.setCoordinates(coord);
  }
});

.setCoordinates([clk_coords[0] + ', ' + clk_coords[1]]);

Передаёте в setCoordinates массив, состоящий из одной строки.

А должен быть массив из двух чисел. Который у вас уже есть: .setCoordinates(clk_coords);.

Сложить метки в массив, по событиям mouseover/mouseout на элементах за пределами карты получать их, элементов, индекс (можно хранить его в data-атрибуте), по индексу извлекать соответствующую метку из массива и обновлять её свойства.

jsfiddle.net/n8k5L7z3

говорят, что нет

Проблема из-за css. Для всех canvas'ов у вас задано правило width: 100% !important;, а родительский элемент canvas'а карты имеет нулевые размеры.

UPD.

new ymaps.Map("map", {

Вот так делать не надо. Что если экземпляров компонента с картой будет больше одного? - двух, трёх и т.д. карт с одним id быть не может. Замените id на ref, и передавайте в конструктор карты вместо id сам элемент.

кастомные свойства для иконки прописал...

...не там, где надо. Перенесите из properties в options (третий параметр вместо второго).

jsfiddle.net/s7pxruhL

<div id="buttons"></div>
<div id="map"></div>

const items = [
  { coord: [ 55.751244, 37.618423 ], title: 'Moscow' },
  { coord: [ 48.864716, 2.349014 ], title: 'Paris' },
  { coord: [ 34.052235, -118.243683 ], title: 'Los Angeles' },
];

ymaps.ready(function () {
  const map = new ymaps.Map('map', {
    zoom: 9,
    center: items[Math.random() * items.length | 0].coord,
  });

  items.forEach(n => map.geoObjects.add(new ymaps.Placemark(n.coord)));


  const buttons = document.querySelector('#buttons');

  buttons.innerHTML = items.map((n, i) =>
    `<button data-index="${i}">${n.title}</button>`
  ).join('');

  buttons.addEventListener('click', ({ target: { dataset: { index } } }) => {
    if (index) {
      map.setCenter(items[index].coord);
    }
  });
});

jsfiddle.net/7kh08L4m

Добавляем пунктам select'а атрибут, содержащий координаты города:

<option value="[55.751244,37.618423]">Москва</option>

При выборе пункта достаём значение, дёргаем setCenter:

select.addEventListener('change', function() {
  map.setCenter(JSON.parse(this.value));
});

jsfiddle.net/mjdkchzs

onDragEnd={e => console.log(e.get('target').geometry.getCoordinates())}