title: Vue - Nested Click Event Bubbling Issue
body: <p>I have a menu button with a click event in Vue.  When the button is clicked, it's supposed to activate the menu itself.  This is the parent element which when clicked activates the menu (the toggleMenu function makes <code>menuIsActive</code> true).  This part works fine:</p>
  
  <pre><code>&lt;div class="navbar-item has-dropdown @click="toggleMenu"&gt;
    &lt;div class="navbar-link"&gt;&lt;/div&gt;
    &lt;app-navmenu :class="{'is-active': menuIsActive}"/&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And this is the <code>app-navmenu</code> component that gets rendered:</p>
  
  <pre><code>&lt;div class="navbar-dropdown" @click.stop&gt;
    &lt;div class="container is-fluid"&gt;
      &lt;div class="column"&gt;
        &lt;h1 class="title"&gt;Title&lt;/h1&gt;
        &lt;router-link class="navbar-item" :to="route" exact&gt;
          &lt;div class="navbar-content"&gt;
            &lt;p class="has-text-info"&gt;info&lt;/p&gt;
            &lt;small&gt;meta info&lt;/small&gt;
          &lt;/div&gt;
        &lt;/router-link&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The problem I am running into is that I don't want the menu to disappear when I click on the actual <code>navbar-dropdown</code> div element, hence why I have a <code>@click.stop</code>.  However, I do want the menu to disappear when I click on a <code>router-link</code> element, but since I have <code>@click.stop</code> in the <code>navbar-dropdown</code> element, the menu persists.  If I don't have a <code>@click.stop</code> event on the <code>navbar-dropdown</code> element, then the menu disappears as soon as the <code>navbar-dropdown</code> element is clicked on, which I don't want.</p>
  
  <p>How can I have the menu persist when clicking on the dropdown body, but also have it disappear when I click on a router-link?  I've tried other click methods like <code>.self</code> and <code>.prevent</code>, but those don't seem to do what I need.</p>