Version

3.2.19

Reproduction link

sfc.vuejs.org/

Steps to reproduce

Click on the labels in the reproduction

What is expected?

Event should fire only once

What is actually happening?

Event is fired twice

When merging the templates into one template, the fire 2 text fires only once :-)

This is caused by two things:

1. You needlessly binding $attrs to the root element, as Vue will do that on its own already (called "attribute fallthrough") and have an additional single @click listener defined.
2. A failure on Vue's part to detect that the same click event will be added twice when merging attrs in this fallthrough behavior. This only happens in this specific scenario where you already have two click events (which are combined in an array), and then Vue adds fallthrough events on its own.

To be precise, this line doesn't account for event arrays:

https://github.com/vuejs/vue-next/blob/ebd0baca98b618945fba223b94833c2b34cdf6a2/packages/runtime-core/src/vnode.ts#L794

Solution/Workaround for OP:

Either remove v-bind="$attrs" as it's not needed to assign attrs to the root element, or properly add the inheritAttrs: false option if you want to assign $attrs manually.

We still should fix this thoug, as this incomplete check in mergerProps could potentially affect other scenarios as well I would assume.

just discovered this issue where the handler is getting fired two time.