无法通过Vuejs中的引用访问元素绑定客户端rect

Question

我使用外部Vuejs组件渲染日历。在此日历内，通过将我自己的组件通过插槽注入来定制事件的显示。由于某种原因，我需要获取这些子组件（实际上是它们的根div元素）的边界客户端rect。因此，我在MyCustomComponent的这些div上设置了引用：

<div class="some-style"
     ...
     ref="rootElement">

在父组件ParentComponent中，我还在每个子组件上添加了一个引用来访问其根元素：

<div slot="slot-for-events"
     ...">
    <my-custom-component
        :ref="`ref-${id}`"
        ...
    >
    </my-custom-component>
</div>

然后，当将鼠标悬停在此组件上时，我尝试通过以下方法在ParentComponent方法中获取其坐标：

const rect = this.$refs[`ref-${id}`].$refs.rootElement.getBoundingClientRect();
console.log('Rect:' + JSON.stringify(rect));

但是，返回的rect的所有分量都为零。同步不是问题，因为在安装组件之后触发了该事件。这也不是没有定义引用的问题，因为所有引用均已正确定义且rootElement正确指向DIV元素。这只是getBoundingClientRect（）不返回实际的边界矩形。

最奇怪的是，如果我在相同的div上添加一个ID，然后在控制台中输入

document.getElementById('ref-' + id).getBoundingClientRect();

对于ref rootElement引用的相同元素，正确返回边界客户端rect！

有什么想法吗？