在vue中使用refs獲取對象的高度，寬度為0

在vue模板中，控制子元素（echarts圖表組件）和父元素（div）的大小相等。在父元素的mounted鉤子中根據(jù)refs獲取父元素（div）的高度和寬度傳遞給子元素，可是每次在mounted打印出的高度都是0代碼如下：

<template>
<div class="pie" ref="monthPie">
   <v-colorPie :domHeight="domHeight"/>
</div>
</template>
<script>
export default {
    data(){
        return{
            domHeight:0
        }
    },
     mounted(){
         alert(this.$refs.monthPie.offsetHeight)
     }
}
</script>
<style>
.pie{
    margin-top:1%
    height:93%
    width:100%
}
</style>