How to use Vue mouse events with composition api?

I am just trying to see how @mouseup, @mousedown, @mousemove events are working. I have just a div:

// html

<div class="test" @mousemove="mouseMove" @mousedown="mouseDown" @mouseup="mouseUp">{{x}}</div>

// CSS

.test {
  height: 100px;
  width: 200px;
  background-color: red;
}

// Vue

  setup() {
    const x = ref(0);

    const mouseMove = event => {
      console.log("Mouse Moved ", event.x, event.y);
      x.value = event.x;
    };

    const mouseDown = event => {
      console.log("Mouse Down", event.x, event.y);
    };

    const mouseUp = event => {
      console.log("Mouse Up", event.x, event.y);
    };

    return {
      x,
      mouseMove,
      mouseDown,
      mouseUp
    };
  }

Now every time I click, I can see all 3 events called once, but nothing happens when I click and drag, no event is called.

Mouse Moved  106 729
Mouse Down 106 729
Mouse Up 106 729

Why is that ? I can't seem to understand why.