如何在 Vue.js 中获取组件元素的 offsetHeight

我正在使用Vue创建一个组件.js，并将其插入DOM中，没有任何问题.一旦元素进入DOM，我想知道它的渲染高度——也就是说，我想得到它的offsetHeight.我想不出怎么做——我肯定错过了一些非常明显的东西.这就是我try 过的:

HTML:

<!-- vue instance -->
<div id="my-app">

    <my-component></my-component>

</div>

<!-- component template -->
<template id="my-component">
    <h1>Hello World</h1>
    <p>Lorem ipsum dolor sit amet.</h1>
    <pre>{{ myheight }}</pre>
</template>

Vue Javascript:

Vue.component('my-component',{
    template: '#my-component',
    computed: {
        myheight: function(){
            return this.offsetHeight;
        }
    }
});

Vue({ el: '#my-app' });

但它不起作用——《我的身高》最后是空的.我认为问题可能在于，它可能在被插入DOM之前试图生成计算(computed)属性，所以我没有使用计算(computed)属性，而是try 了以下方法:

Vue.component('my-component',{
    template: '#my-component',
    data: function(){
        return {
            myheight: 999
        };
    },
    ready: function(){
        this.myheight = this.offsetHeight;
    }
});

同样，它不工作-它什么也不输出-我在控制台中也没有收到任何错误或警告.

然后，我认为也许this不是HTMLElement，所以我搜索了Vue文档，发现所有Vue实例都应该有一个指向HTMLElement的$el属性——或者至少我是这样理解的...所以我try 在上面两个例子中使用this.$el.offsetHeight，但同样没有成功.

有人能给我指出正确的方向吗？感谢所有的帮助...