0xD34F

почему вот такой код не работает

onLoad={(inst)=>{return inst.events.add('click', clickOnMap)}}

Потому что через onLoad вы получаете доступ к ymaps api, а не к экземпляру карты.

Хотите экземпляр карты - используйте instanceRef:

instanceRef={inst => inst.events.add('click', clickOnMap)}

Но вообще, для того, чтобы назначить обработчик клика, экземпляр карты трогать не надо:

onClick={clickOnMap}

map.events.add('click', e => e.get('target').balloon.close());

jsfiddle.net/axtjgfh9

jsfiddle.net/wLqme4h9

Существует ли где-то пример с этим куском кода, но на чистом js?

теперь существует

jsfiddle.net/54hpusg2

<yandex-map
  ref="map"
  ...

<button
  @click="$refs.map.myMap.balloon.open(координаты, содержимое)"
  ...

https://codesandbox.io/s/vue-template-3zfg1

.gray {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
}

map.panes.get('ground').getElement().classList.add('gray');

https://jsfiddle.net/8y0t6kjv/

Потому что настройки балуна относятся к properties, а не к options - читайте документацию.

Нет у ваших меток никакого содержимого, нечего подтягивать.
Можно достать нужный текст из массива по индексу метки:

const index = myCollection.indexOf(e.get('target'));
alert(myCoords[index].text);

UPD. Не очень понятно, зачем вообще тут нужен alert. Задайте меткам balloonContent - нужный текст будет отображаться посредством всплывающих окон.

Просто добавьте метке обработчик клика:

placemark.events.add('click', () => {
  // здесь дёргаете scrollTo или scrollIntoView
});

https://jsfiddle.net/9xskoczg/

<Map instanceRef={map => this.map = map}>

map.events.add('boundschange', function(e) {
  placemark.geometry.setCoordinates(e.get('newCenter'));
});

ну например - с использованием react-yandex-maps

map.events.add('boundschange', function(e) {
  const
    newZoom = e.get('newZoom'),
    oldZoom = e.get('oldZoom');

  if (newZoom !== oldZoom) {
    ...
  }
});

Если бы вы нормально отформатировали свой код, то смогли бы заметить, что настройки иконки передаются в конструктор Placemark четвёртым параметром, что неправильно. Должен быть третий.

А, ну и ещё не хватает iconLayout: 'default#image'.

UPD. Вынесено из комментариев:

Если вам не сложно, можно для чайников и более наглядно ?

можно

бибилиотека react-yandex-maps не имеет такой функциональности

Функциональность имеет - ведь это никакая не библиотека, а обёртка над картами.

myPlacemark.geometry.setCoordinates([ lat, lng ]);

document.querySelector('.items').addEventListener('click', function(e) {
  const t = e.target;
  if (t.classList.contains('item')) {
    map.setCenter([ t.dataset.lat, t.dataset.lng ]);
  }
});

objManager.clusters.balloon.close();
objManager.objects.balloon.close();

например