How to prevent useMouseInElement from listening to the event when the target is overlapped?

[e-tho]

What's the best way to handle event propagation with useMouseInElement?
I'd like to prevent event listening when an element covers the target, while avoiding having to stop it when opening each overlay present on my app.

[e-tho]

Initializing useMouseInElement at @mouseenter and stopping it when isOutside switches to true helped in my case, as I'm animating multiple elements.

<img
  ...
  @mouseenter="setupTiltEffect(edition.id, $event.target)"
>

const setupTiltEffect = (id, el) => {
  ...
  const mouseData = useMouseInElement(el, { type: "client", touch: false });
  
  watch(mouseData.isOutside, (newVal) => {
    if (newVal) mouseData.stop();
  });
  ...
}