I run into a issue for the v-calendar component, to stay simple, i have a @click:date and a @click:day event who do the same things (open a modal).
I see if the calendar have multiples event is not native supported and a button with more event is display (see this)
The get event we have to use is @click:more, the problem is when i click on the button more @click:day is fireup at the same time.
So, the solution is for me pretty simple, as a modifier stop @click.stop:more or @click:date.more, but i got the following error $event.stopPropagation is not a function.
Now, i'm not really sur what i need, i have the same issue for the click @click:event i fixed that by use the slot event and set a @click on the element.
I solved the problem by what i think a not good way. But this works like expect and affect nothing, if we can't use a .stop event is maybe the good way.
Remove the @click:day on your v-calendar balise, add inside a template:
<template v-slot:day="day">
<div class="tw-h-full" @click="openModalDay(day)" />
</template>
Tw-h-full is use to take the entire height of the day. Note the fact, no template is available for the more button.
And add on the v-calendar the @click:more, all works fine and no trigger event at the same time.