使用Vue.js确定放置坐标是否在另一个元素上？

<div id="app">
  <div
    id="element1"
    @mousemove="checkIfInside"
  ></div>
</div>

new Vue({
  el: '#app',
  computed: {
    checkIfInside() {
      const element1 = document.getElementById('element1');
      const mouseX = event.clientX;
      const mouseY = event.clientY;

      const elementRect = element1.getBoundingClientRect();
      const elementTop = elementRect.top;
      const elementLeft = elementRect.left;
      const elementWidth = elementRect.width;
      const elementHeight = elementRect.height;

      if (
        mouseX >= elementLeft &&
        mouseX <= elementLeft + elementWidth &&
        mouseY >= elementTop &&
        mouseY <= elementTop + elementHeight
      ) {
        // 鼠标坐标在元素范围内
        return true;
      } else {
        // 鼠标坐标不在元素范围内
        return false;
      }
    }
  }
});