separate v-card-actions from :to, :href attribute

[hslee2008]

Trying to make a card when clicked, opens a new link (within the site) using :to attribute.
But having trouble when adding v-card-actions as clicking on it will go to the set to link.

Are there any ways to separate these elements?

If there isn't one, please add this into one of v-card-actions attribute.

Example

<v-card to="/">
  <v-card-text> Home </v-card-text>
  <v-spacer></v-spacer>
  <v-card-actions>
    <v-menu offset-y>
      <template v-slot:activator="{ on, attrs }">
        <v-btn icon v-bind="attrs" v-on="on" cols="1">
          <v-icon>mdi-dots-vertical</v-icon>
        </v-btn>
      </template>
      <v-list></v-list>
    </v-menu>
  </v-card-actions>
</v-card>

When clicking on dots-vertical icon, the user is taken to a home page instead of showing menu and not going to the home page.

I have tried:

1. setting z-index of v-card-actions higher to bring them to the front

[KaelWD]

https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation