title: Vue @click doesn't work on an anchor tag with href present
body: <p>EDIT: I forgot to clarify, what I'm looking for is to know how to write an anchor tag with the href attribute present but that when the element is clicked, the href should be ignored and the click handler should be executed.</p>
  
  <p>I'm currently using Vue 1 and my code looks like:</p>
  
  <pre><code>&lt;div v-if="!hasPage(category.code)"&gt;
    &lt;div&gt;
      &lt;template v-for="subcategoryList in subcategoryLists[$index]" &gt;
        &lt;ul&gt;
          &lt;li v-for="subcategory in subcategoryList"v-on:click.stop="test()"&gt;
            &lt;a :href="subcategory.url"&gt;{{subcategory.label}}&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/template&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>What i'm trying to do is present the user with some buttons that represent my site's categories, some of this buttons will lead the user to another page and other will toggle a dropdown with a list of subcategories, when clicking these subcategories you will be taken to the subcategory's page.</p>
  
  <p>These would be pretty simple but these buttons need to be tracked by Google Tag Manager so that's why I used the @click attribute to call a function and ignore the href attribute. This doesn't work, I have tried @click.prevent, @click.stop, @click.stop.prevent and none of these work.</p>
  
  <p>The thing is that if I remove the href attribute, the @click method works great but an SEO requirement is to have href attributes on every link.</p>
  
  <p>Any help would be appreciated.</p>