title: v-on:click and event triggering on inner elements
body: <p>I have a list of tabs set up with the following markup:</p>
  
  <pre><code>&lt;li v-on:click.stop="changeTab()" id="bookings"&gt;
      &lt;i class="fa fa-scissors" aria-hidden="true"&gt;&lt;/i&gt; &lt;span&gt;Bookings&lt;/span&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>The changeTab() method is:</p>
  
  <pre><code>changeTab: function() {
      window.location.hash = this.activeTab = event.srcElement.id;
  }
  </code></pre>
  
  <p>The issue here is that if I click on the inner elements, i / span, then it sets the incorrect ID (none) and its the srcElement. Is there a way to now allow this to happen? Can I make the wrapper the only click that is listened to?</p>