title: VueJs 2.0 emit event from grand child to his grand parent component
body: <p>It seems that Vue.js 2.0 doesn't emit events from a grand child to his grand parent component.</p>
  
  <pre><code>Vue.component('parent', {
    template: '&lt;div&gt;I am the parent - {{ action }} &lt;child @eventtriggered="performAction"&gt;&lt;/child&gt;&lt;/div&gt;',
    data(){
      return {
        action: 'No action'
      }
    },
    methods: {
      performAction() { this.action = 'actionDone' }
    }
  })
  
  Vue.component('child', {
    template: '&lt;div&gt;I am the child &lt;grand-child&gt;&lt;/grand-child&gt;&lt;/div&gt;'
  })
  
  Vue.component('grand-child', {
    template: '&lt;div&gt;I am the grand-child &lt;button @click="doEvent"&gt;Do Event&lt;/button&gt;&lt;/div&gt;',
    methods: {
      doEvent() { this.$emit('eventtriggered') }
    }
  })
  
  new Vue({
    el: '#app'
  })
  </code></pre>
  
  <p>This JsFiddle solves the issue <a href="https://jsfiddle.net/y5dvkqbd/4/" rel="noreferrer">https://jsfiddle.net/y5dvkqbd/4/</a> , but by emtting two events: </p>
  
  <ul>
  <li>One from grand child to middle component</li>
  <li>Then emitting again from middle component to grand parent</li>
  </ul>
  
  <p>Adding this middle event seems repetitive and unneccessary. Is there a way to emit directly to grand parent that I am not aware of?</p>