写一个盒子跟随鼠标光针并且在页面上显示坐标的html并且使用vue2代码

要在HTML中创建一个跟随鼠标并显示坐标信息的可交互元素，并结合Vue 2框架来实现实时更新，你需要做以下步骤：
首先，确保已经安装了Vue CLI（命令行工具）和Vue。然后，创建一个新的Vue项目：

vue create mouse-coordinate-tracker
cd mouse-coordinate-tracker

接下来，在`src/components`目录下创建一个名为`MouseTracker.vue`的新文件，内容如下：

<template>
  <div class="mouse-tracker">
    <div :style="{ top: cursorY + 'px', left: cursorX + 'px' }" class="cursor-pointer"></div>
    <p v-if=showCoordinates>{{ coordinates }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cursorX: 0,
      cursorY: 0,
      showCoordinates: false,
      Coordinates: { x: null, y: null },
    };
  },
  mounted() {
    document.addEventListener('mousemove', this.updateCursor);
  },
  beforeDestroy() {
    document.removeEventListener('mousemove', this.updateCursor);
  },
  methods: {
    updateCursor(e) {
      this.cursorX = e.clientX;
      this.cursorY = e.clientY;
      this.showCoordinates = true;
      this.Coordinates.x = this.cursorX;
      this.Coordinates.y = this.cursorY;
    }
  }
};
</script>

<style scoped>
.cursor-pointer {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: red;
  position: absolute;
}
</style>

在这个组件里，我们监听`mousemove`事件来获取鼠标的当前位置，并实时更新`cursorX`和`cursorY`数据。当鼠标移动时，会显示一个红色方块表示鼠标位置，同时更新`coordinates`文本显示当前坐标。

现在，你可以在`main.js`中引入并注册这个组件：

import MouseTracker from '@/components/MouseTracker.vue';

// 在App.vue或合适的地方导入和使用
Vue.component('mouse-tracker', MouseTracker);

new Vue({
  el: '#app',
});

这样，当你在页面上加载这个`mouse-tracker`组件时，一个跟着鼠标移动并显示坐标的方块就会出现。关闭浏览器窗口时，`beforeDestroy`生命周期钩子会被调用，从而移除鼠标事件监听器。