<div id="app">
  <yandex-map
    :coords="coords"
    zoom=10
    :cluster-options="clusterOptions"
  >
    <ymap-marker
      marker-id="1"
      :coords="coords"
      :balloon="{header: 'First'}"
      cluster-name="1"
    ></ymap-marker>
    <ymap-marker
      marker-id="2"
      :coords="coords"
      :balloon="{header: 'Second'}"
      cluster-name="1"
    ></ymap-marker>
  </yandex-map>
</div>

#app {
  width: 100%;
  height: 100vh;
}

.ymap-container {
  height: 100%;
}

new Vue({
  el: '#app',
  data: {
    coords: [
      54.82896654088406,
      39.831893822753904
    ],
    clusterOptions: {
      '1': {
        clusterDisableClickZoom: true,
        clusterOpenBalloonOnClick: true,
        clusterBalloonLayout: [
          '<ul class=list>',
          '{% for geoObject in properties.geoObjects %}',
          '<li><a href=# class="list_item">{{ geoObject.properties.balloonContentHeader|raw }}</a></li>',
          '{% endfor %}',
          '</ul>'
        ].join('')
      }
    }
  }
})