App.vue

<template>
  <with-mouse>
    <div
      slot-scope="{ coords }"
      :style="{
        left: `${coords.x - 75}px`,
        top: `${coords.y - 75}px`,
      }"
      class="box"
    />
  </with-mouse>
</template>

<script>
import withMouse from './withMouse';

export default {
  components: { withMouse },
};
</script>

<style>

@keyframes blink {
  from {
    background-color: tomato;
  }
  to {
    background-color: cyan;
  }
}
* { margin: 0; padding: 0; box-sizing: border-box }
html, body .container { width: 100%; height: 100%; background-color: #ccc }
.box {
  position: absolute;
  background-color: tomato;
  border-radius: 50%;
  width: 150px;
  height: 150px;
  animation: blink 400ms ease-in infinite;
}
</style>

withMouse.vue

<template>
  <div class="container" @mousemove="handleEvent">
    <slot :coords="{ x, y }" />
  </div>
</template>

<script>
export default {
  data: () => ({
    x: window.innerWidth * 0.5,
    y: window.innerHeight * 0.5,
  }),
  methods: {
    handleEvent(event) {
      const { clientX, clientY } = event;
      this.x = clientX;
      this.y = clientY;
    },
  },
}
</script>