Не работает директива v-on:click на компоненте

В компоненте нужно на кнопку повесить событие и пробросить событие нажатия наверх в родительский компонент: @click="$emit('click', $event)"

Ответ на англоязычном stackoverflow

Vue.component('sample', {
  render: function(createElement) {
    return createElement('button', {
      on: {
        click: this.$listeners.click
      }
    }, this.$slots.default)
  }
})
new Vue({
  el: '#app',
  methods: {
    foo() {
      console.log('foo called')
    }
  }
})

Использование

<script src="https://unpkg.com/vue"></script>
<div id="app">
  <sample v-on:click="foo()">bar</sample>
</div>