vue如何实现这个功能

Vue可以通过绑定事件和计算属性来实现这个功能。

首先，在Vue模板中，你需要绑定鼠标移动事件和计算属性。你可以使用v-on指令来绑定事件，使用v-bind指令来绑定元素的样式。

接下来，在Vue实例中，你需要定义一个data属性来保存元素的位置和大小，还需要定义一个计算属性来根据鼠标的位置来计算元素的边框位置和大小。

最后，在事件处理函数中，你可以更新data属性的值，然后通过计算属性来更新元素的样式。

下面是一个示例代码：

HTML模板：

<template>
  <div class="my-element"
       v-bind:style="{ left: position.left + 'px', top: position.top + 'px', width: position.width + 'px', height: position.height + 'px', border: isOnBorder ? '2px solid red' : '2px solid blue' }"
       v-on:mousemove="onMouseMove">
    My Element
  </div>
</template>

Vue实例：

<script>
export default {
  data() {
    return {
      position: {
        left: 0,
        top: 0,
        width: 100,
        height: 100
      },
      mouseX: 0,
      mouseY: 0
    };
  },
  computed: {
    isOnBorder() {
      var borderLeft = this.position.left;
      var borderTop = this.position.top;
      var borderRight = borderLeft + this.position.width;
      var borderBottom = borderTop + this.position.height;
      
      return this.mouseX < borderLeft || this.mouseX > borderRight || this.mouseY < borderTop || this.mouseY > borderBottom;
    }
  },
  methods: {
    onMouseMove(event) {
      this.mouseX = event.clientX;
      this.mouseY = event.clientY;
      
      this.position.left = event.clientX - this.position.width / 2;
      this.position.top = event.clientY - this.position.height / 2;
    }
  }
};
</script>

在上面的代码中，当鼠标移入到元素的边框上时，元素的边框颜色会变成红色，否则为蓝色。鼠标移动的时候，元素的位置会跟随鼠标移动，同时计算属性isOnBorder会根据鼠标的位置来判断鼠标是否移入到元素的边框上。