title: Vuejs - bubbling custom events
body: <p>Is there a way to allow events to bubble up when using a component within a component?</p>
  
  <p>My application is a dynamic menu. The dynamic menu is a component (<code>dyn-menu</code>) and it uses a local component (<code>menu-item</code>) for each of the <code>&lt;li&gt;</code> elements. Each <code>&lt;menu-item&gt;</code> has a click handler associated with it that emits a custom event (with an ID for menu item in the full implementation). But the application doesn't see the events issued by <code>&lt;menu-item&gt;</code> because they are not bubbled up.</p>
  
  <p>Is there a way to allow the <code>&lt;menu-item&gt;</code> component, which is local to the <code>&lt;dyn-menu&gt;</code> component, emit the event and still allow <code>vapp</code> to see and handle the event?</p>
  
  <p>I'm pretty new to Vuejs so I might be missing something obvious. And it's possible that I'm trying to solve this by using two components and that's not the best way to handle it. Is there is a better way to approach it?</p>
  
  <p>Here's a <a href="https://jsfiddle.net/bmacnaughton/0598puch/5/" rel="noreferrer">jsfiddle</a>. You have to remove the <code>@dyn-menu-item-click='itemClick'</code> line in the <code>&lt;dyn-menu&gt;</code> template to illustrate that the event doesn't bubble up if the component doesn't handle the event. If that line is removed then <code>&lt;dyn-menu&gt;</code> doesn't handle the event but <code>vapp</code> never sees the event either.</p>