VueJS получает доступ к компонентам из экземпляра

Я ищу способ получить доступ к методу моего компонента из моего экземпляра

<button id="live" class="ui primary button" v-on:click.prevent="live">
    Live Text
</button>

который находится непосредственно внутри моего #app, и чтобы заставить его запускать метод live из моего компонента Live.vue, я нашел тонны документации до версии 2.x о broadcast и dispatch, но после часа попыток заставить его работать с использованием $emit я уже не знаю что делаю..

<template>
  <div v-if="loaded">
    Live
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      loading: false,
      loaded: false,
    }
  },
  methods: {
    load: function (event) {
      console.log('loading..')
      this.loaded = !this.loaded
    }
  },
  mounted: function () {
    // this.$on('liveClick', function (msg) {
    //   console.log(msg)
    // })
  },
  name: 'Live',
  props: {
    'id': Number,
    'key': String
  }
}
</script>

и init.js (это структура на основе laravel)

window.App = new Vue({
   el: '#app',
   methods: {
     live: function (event) {
       this.$emit('liveClick', 'msg')
     }
   }
})

Я уже сделал «обходной путь» с Vuex, но мне не нужно усложнять кривую обучения только для того, чтобы заставить это работать.

jsfiddle: https://jsfiddle.net/c4s44qgy/1/