<div id="app">
  <yandex-map
    :coords="coords"
    zoom=10
    @click="onClick"
  >
    <ymap-marker 
      :coords="coords"
      marker-id="123123"
      :balloon-template="balloonTemplate"
    />
  </yandex-map>
</div>

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

.ymap-container {
  height: 100%;
}

.red { color: red; }

new Vue({
  el: '#app',
  data: {
    coords: [
      54.82896654088406,
      39.831893822753904
    ],
  },
  computed: {
    balloonTemplate() {
      return `
<h1 class="red">Hi, everyone!</h1>
<p>I am here: ${this.coords}</p>
<img src="http://via.placeholder.com/350x150">
`
    }
  },
  methods: {
    onClick(e) {
      this.coords = e.get('coords');
    }
  }
})