Click event into router-link

Here my router-link code snippet:

              v-for="p in products"
              :to="{name: 'details', params:
              {id: p.Id, maker: p.Maker,
              img: p.img, url:p.Url, title:p.Title,
              description: p.Description, price: p.Price}

I call my product-element component in the router-link.

My product-element component:

  <v-col align="center">
    <v-img :src="img" max-height="200" max-width="200"></v-img>
    <v-list-item-title v-text="title" class="ma-4 font-weight-bold"></v-list-item-title>
    <h2>Price: {{ price }}</h2>
    <v-btn class="ma-5" @click="addBox">
      <h3>Add to Box</h3>

I used a button in the product-element component and this button has a click event.
The problem is that when I click the button inside product-element, “to” event of the router-link(parent) triggered.

How can I solve this problem?