title: VueJS accessing components from instance
body: <p>I am looking for a way to access my component's method from my instance </p>
  
  <pre><code>&lt;button id="live" class="ui primary button" v-on:click.prevent="live"&gt;
      Live Text
  &lt;/button&gt;
  </code></pre>
  
  <p>which is directly inside my <code>#app</code> and to get it to launch a <code>live</code> method from inside my component <code>Live.vue</code> I've found tons of documentation prior to ver 2.x about <code>broadcast</code> and <code>dispatch</code>, but after hour of trying to get it working using <code>$emit</code> I am not sure what am I doing anymore ..</p>
  
  <pre><code>&lt;template&gt;
    &lt;div v-if="loaded"&gt;
      Live
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  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
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>and <code>init.js</code> (it's a laravel based structure)</p>
  
  <pre><code>window.App = new Vue({
     el: '#app',
     methods: {
       live: function (event) {
         this.$emit('liveClick', 'msg')
       }
     }
  })
  </code></pre>
  
  <p>I already did a 'workaround' with Vuex, but I don't need to complicate my learning curve just to get this working.</p>
  
  <p>jsfiddle: <a href="https://jsfiddle.net/c4s44qgy/1/" rel="nofollow noreferrer">https://jsfiddle.net/c4s44qgy/1/</a></p>