Vue.js VueJS：向左，元素的顶部位置

在转换遗留jquery代码时，我一直在获取元素的位置.

我的目标是在a标签上方显示浮动div.

这是我的模板.

<a href="#none" v-for="busstop in busstops"
   :id="busstop.id"
   @mouseenter="onMouseEnterBusStop"
   @mouseleave="onMouseLeaveBusStop"
   onclick="detailsOpen(this);">
<div :class="['marker-info', markInfoBusStop.markerInfoActiveClass]"
     :style="markInfoBusStop.markerInfoStyle">
    <p><strong>{{markInfoBusStop.busStopNo}}</strong>{{markInfoBusStop.busStopName}}</p>
    <dl>
      ...
    </dl>
</div>

Vue代码如下.

data: {
  markInfoBusStop: { 
      busStopNo: '12345',
      markerInfoActiveClass: '',
      markerInfoStyle: {
        left: '200px',
        top: '200px'
      }
  },
  ...
},
methods: {
  onMouseEnterBusStop: function(ev) {
    let left = ev.clientX;
    let top = ev.clientY;
    this.markInfoBusStop.markerInfoActiveClass = 'active';
    this.markInfoBusStop.markerInfoStyle.left = left + 'px';
    this.markInfoBusStop.markerInfoStyle.top = top + 'px';
}

我只是使用当前鼠标指针的位置，但需要元素的绝对位置.

我的传统jquery使用$(this).position()，如下所示.

$(document).on("mouseenter", "a.marker", function() {
    var left = $(this).position().left;
    var top = $(this).position().top;
    $(".marker-info").stop().addClass("active").css({"left":left, "top": top});
});

提前谢谢.