I'm trying to create notfication, when the notification clicked and linked to his path will decrease the notification length.

```
<li class="header">You have {{ notificationsCount()}}  notif</li> <li>
 <ul class="menu">
    <li v-for="(notification, index) in notif" :notification="notification" :key="notification.id">                  

      <a :href="notification.data.path"              
          @click="markAsRead(notification.id)"
          @mouseup.right="markAsRead(notification.id)"
          class="text-aqua">{{ notification.data.message }}
       </a>
      </li>
  </ul>

```

```
    methods: {
        notificationsCount() {
            return this.notif.length
        },

        markAsRead(index, id) {
        if (this.notif.length){
                axios.delete(`/notifications/${id}`)
                    .then(() => {
                        this.notif.splice(index, 1);
                        this.notificationsCount();
                    }); 
            }                 
        }
    }

```

The problem is when a :href link is exist, notificationcount not decrease, but when a :href filled with(#) or i used @click.prevent its work to execute the function and notificationcount decreased. how to solve it?

inside tag i have two trigger @click & @mouseup.right for handle when open new tab. and when i click right its work well and notification decreased because execute through @mouseup.right but when execute through @click its not work. i have to reload once again for decrease notification count