VUE/TS: Property 'offsetX' does not exist on type 'Event'.

[DevKame]

I created some Cards that rotate around x and y axis depending on the mouse's position when hovering over it. Everything works as it should but my IDE throws me an error.

Template:

<div
    @mouseenter="hoverCard"
    @mousemove="rotateCard"
    @mouseleave="resetTransform"
    class="p-card rounded-4 bg-prim-d">
</div>

rotateCard():

function rotateCard(e: Event) {
    const card = e.target as HTMLDivElement;

    let rotation_max = 5;


    let rot_x = 0;
    let rot_y = 0;

    let w_width = card.clientWidth;
    let h_width = w_width / 2;

    let w_height = card.clientHeight;
    let h_height = w_height / 2;

    let mouse_x = e.offsetX;
    let mouse_y = e.offsetY;
    let percent_x = 0;
    let percent_y = 0;

    if(mouse_x <= w_width / 2)
    {
        percent_x = (mouse_x * 100) / h_width;
        percent_x = 100 - percent_x;
        rot_y = -(rotation_max / 100) * percent_x;
    }
    else if(mouse_x > w_width / 2)
    {
        percent_x = ((mouse_x - h_width) * 100) / h_width;
        rot_y = (rotation_max / 100) * percent_x;
    }
    if(mouse_y <= w_height / 2)
    {
        percent_y = (mouse_y * 100) / h_height;
        percent_y = 100 - percent_y;
        rot_x = (rotation_max / 100) * percent_y;
    }
    else if(mouse_y > w_height / 2)
    {
        percent_y = ((mouse_y - h_height) * 100) / h_height;
        rot_x = -(rotation_max / 100) * percent_y;

    }
    if(readyToRotate.value)
    {
        card.style.transform = `translateZ(30px) rotateY(${rot_y}deg) rotateX(${rot_x}deg)`;
    }
}

The error:

What did i try:

• reinstalling/updating my Vue language Support just in case its messed up
• using let mouse_x = e.offsetX!;
  what did i do wrong?

like i said its working as it should just the IDE is crying.

[LinusBorg]

Well, the basic Event doesnt have these properties.

You expect a MouseEvent, so use that as the event type .