Click event into router-link

Get Help
,
#1

Here my router-link code snippet:

     <router-link
              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}
              }"
              :key="p.Id">
            <product-element
                :id="p.Id"
                :description="p.Description"
                :img="p.img"
                :maker="p.Maker"
                :ratings="p.Ratings"
                :title="p.Title"
                :price="p.Price"
                :url="p.Url"
                @added="addBox">
            </product-element>
     </router-link>

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

My product-element component:

<v-list-item-content>
  <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>
    </v-btn>
  </v-col>
</v-list-item-content>

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?