How to stop a click event from a sub-component that breaks through despite .stop?

Question

JavaScript

Vuetify v-list-tile elements contain action buttons.
When I made the element a Vue-Router link via the property to, button clicks also jumped to the router link. Despite the stop modifier:@click.stop="..."

Sample template

<template>
  <v-list-tile :to="'/details/' + id">
  
    <v-list-tile-content>
      <v-list-tile-title>{{ title }}</v-list-tile-title>
    </v-list-tile-content>
    
    
    <v-list-tile-action>
      <v-btn icon @click.stop="saveas">
        <v-icon color="grey lighten-1">save_alt</v-icon>
      </v-btn>
    </v-list-tile-action>
    <v-list-tile-action>
      <v-btn icon @click.stop="refresh">
        <v-icon color="grey lighten-1">refresh</v-icon>
      </v-btn>
    </v-list-tile-action>

  </v-list-tile>
</template>

How to prevent router-link from firing when clicking on v-btn inside?
upd . It seems that the point is that when the attribute is present to, the component is rendered inside the anchor tag , which causes clicks on any elements inside it to fire as a link. What can be done about it? <a>

Answer 1

Will help.prevent

Answer 2

Well, there are 2 options:
1) v-list-tileChange from toto @clickand track there already
2) We v-list-tilehave a prop tag, send a div there, by default it takes from router-link, and therea