I’m working on a Vue 3 project where I need to dynamically replace anchor elements that contain a specific attribute (data-button) with a custom Vue component (CustomButton). To achieve this, I created a directive that queries all the anchor tags within a specified element and dynamically imports the CustomButton component. Below link is a simplified version of my implementation:
[you can see a simiplified example here]

Problem:
The issue I’m facing is that the event listeners for mouseenter and mouseleave are not being triggered. Although I can see that the CustomButton component is loaded and replaced correctly, the added event listeners do not seem to be working.

Question:
Why are the mouseenter and mouseleave event listeners not being triggered on the dynamically created CustomButton component? Is there a different approach or a solution to ensure these event listeners are called?

Any help or suggestions would be greatly appreciated!