I have a UI navigation piece that's comprised of bootstrap 3 (yes I know it's dreadfully old) tabs and panels and Vue 2.

Within one of the tabs (which is a link in it's entirety) I need to place an SVG with a click event that will fire an action in Vuex. But because the SVG is inside an anchor, I also need to stop the tab click so it doesn't take the user to that tab.

My tab looks like so: (svg path shortened for brevity)

<a href="#programs" data-toggle="tab" @click="select(1, $event)" id="link-programs">
  <strong>Programs</strong>
  <div class="pull-right">
    <svg @click.prevent="runPrograms" 
          class="program-indicator" 
          fill="none" 
          stroke="currentColor" 
          viewBox="0 0 24 24" 
          xmlns="http://www.w3.org/2000/svg">
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
        d="removed for brevity"></path>
    </svg>
  </div>
</a>

My first thought was to search up and find the anchor tag and preventDefault() but obviously that didn't work since it's not the event being called.

runPrograms(event) {
  let anchor = event.target.parentElement.parentElement
  anchor.preventDefault()
  // do stuff
}

How can I stop the tab click from executing but only when it's the actual SVG that's been clicked?