In order to create this effect, here are some steps to achieve that, starting from the end:

1. You will want to use scaleX() and scaleY() in CSS transforms
2. You will therefore need to somehow get the velocity of the cursor movement in the x and y axis
3. To get the velocity you will need the following information:
   • The current position of the cursor (easily accessed via the MouseEvent object)
   • The previous position of the cursor (you will need to cache this)
   • The time elapsed between the previous mouse event and current mouse event

With this strategy in mind, here is how it could be done:

Step 1: Allow your data object to cache the previous XY coordinates and timestamp

This can be done by simply updating the data object:

data() {
  return {
    hideCursor: false,
    prevX: 0,
    prevY: 0,
    prevTimeStamp: 0,
  };
},

Step 2: Ensure that you cache these values in your mousemove callback:

We need to store these values at the very end of the mousemove callback, and place the rest of our logic before that (we will get to that later).

document.addEventListener("mousemove", (e) => {
  // SOME LOGIC HERE

  // Update cached values
  this.prevX = e.pageX;
  this.prevY = e.pageY;
  this.prevTimeStamp = e.timeStamp;
});

Step 3: Calculate velocity by comparing current and previous value

To calculate velocity in the X and Y axes, you need to calculate the absolute difference between previous and current X/Y values, and divide them by the time elapsed:

const deltaX = Math.abs(e.pageX - this.prevX);
const deltaY = Math.abs(e.pageY - this.prevY);
const deltaTime = e.timeStamp - this.prevTimeStamp;
const velocityX = deltaX / deltaTime;
const velocityY = deltaY / deltaTime;

Step 4: Determine how to translate velocities into CSS scale transform

This is completely arbitrarily determined and it's up to you. For me, dividing the calculated velocity by 10 gives an effect that I find not too jarring/abrupt and still perceptible to the user. This value might need to be changed based on the absolute pixel size of the cursor.

const scaleX = 1 + velocityX / 10;
const scaleY = 1 + velocityY / 10;

cursor.style.top = `${e.pageY}px`;
cursor.style.left = `${e.pageX}px`;
cursor.style.transform = `translate(-50%, -50%) scaleX(${scaleX}) scaleY(${scaleY})`;

(Optional) Step 5: Ensure that you handle mouseout event on the viewport

This is so that the cursor is not stuck in a strange state when mouse leaves the viewport:

document.addEventListener('mouseout', () => {
  cursor.style.transform = 'none';
});

See an updated example based on your CodeSandbox: