vuejs click event triggers twice

Question

**e.target.closest event triggering twice**

*I am using vuetify framework in my vuejs code.. on clicking v-card(overall), i want the page to redirect to another page, except on clicking 'toggle-switch' class. While clicking 'toggle-switch' class in v-card, it is entering into click function twice. i want it to enter only once . Why does the event triggered twice?*

here's my html code:

  <v-card
    class="text-left ticket-card"
    @click="goToTicketDetails($event, ticket)"
  >
    Some content
    <div class="toggle-switch">
      <v-switch
        v-model="ticket.isOpen"
        hide-details
        class="status-switch"
        :readonly="ticket.isReadOnly"
      ></v-switch>
      <p class="status-text">
        {{ ticket.isOpen ? "Active" : "Resolved" }}
      </p>
    </div>``your text``
  </v-card>

and here's the click function of v-card:

function goToTicketDetails(e, ticket) {
if (e.target.closest(".toggle-switch")) {
console.log("enter");
//while clicking on switch for activate/deactivate
updateTicketStatus(ticket);
} else {
//some code
}
}