<div id="app">
  <yandex-map
    :coords="coords"
    zoom=10
  >
    <ymap-marker 
      :coords="coords"
      marker-id="123123"
      marker-type="placemark"
      @balloonopen="bindListener"
      @balloonclose="unbindListener"
    >
      <my-component slot="balloon"></my-component>
    </ymap-marker>
  </yandex-map>
</div>

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

.ymap-container {
  height: 100%;
}

Vue.component('my-component', {
  template: '<button id="btn">Click</button>'
})

new Vue({
  el: '#app',
  data: {
    coords: [
      54.82896654088406,
      39.831893822753904
    ]
  },
  methods: {
    bindListener() {
      document.getElementById('btn').addEventListener('click', this.handler)
    },
    unbindListener() {
      document.getElementById('btn').removeEventListener('click', this.handler)
    },
    handler() {
      alert('Whoo-Ha!')
    }
  }
})