title: Vue.js "emit event" don't bubble up to parent and grandparent element
body: <p>I want to <code>emit</code> an custom event to bubble up from the grandchild through the child element to the parent element. But it doesn't work. Even to trigger the event directly on the parent nor the child element does not work.</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id="example-app" &gt;
     &lt;parent&gt;
        &lt;child&gt;
           &lt;grandchild&gt;&lt;/grandchild&gt;
        &lt;/child&gt;
     &lt;/parent&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here the Component Code:</p>
  
  <pre class="lang-js prettyprint-override"><code>Vue.component('parent', {
      template: ` &lt;div @testevent="test" style="padding: 10px; background-color: red; border: 1px solid black;"&gt;
                      &lt;button @click="$emit('testevent')"&gt;Parent Button&lt;/button&gt;
                      &lt;button @click="test"&gt;Triggger Test Manueally&lt;/button&gt;
  
                      &lt;slot &gt;&lt;/slot&gt;
                  &lt;/div&gt;`,
      methods: {
          test () {
              alert('Test ok')
          }
      }
  })
  
  Vue.component('child', {
      template: ` &lt;div style="padding: 10px; margin: 5px; background-color: green; border: 1px solid black;"&gt;
                      &lt;button @click="$emit('testevent')"&gt;Child Button&lt;/button&gt;&lt;br&gt;
                      &lt;slot&gt;&lt;/slot&gt;
                  &lt;/div&gt;`
  })
  
  Vue.component('grandchild', {
      template: `&lt;div style="padding:10px; margin: 5px; background-color: white; border: 1px solid black;"&gt;
                  &lt;button @click="$emit('testevent')"&gt;Grandchild Button&lt;/button&gt;
                  &lt;/div&gt;`
  })
  
  new Vue({
      el: '#example-app',
  })
  </code></pre>