vue获取不到元素正确的offsetHeight

vue页面渲染完成后根据获取到的数据来决定操作某个DOM元素
想实现的效果：如果获取到的文本数据所占用的高度小于87px,则不显示展开这个按钮，反之则显示
html

<div>
   	<p id="idu">简介:
      <span type="text" v-html="introduce"></span>
   	</p>
	<div>
	  <a v-if="ishow">{{message}}</a>
	</div>
</div>

js

data(){
    return {
        playlistArr:{},
        message:'展开',
        //控制是否显示
        ishow:false,
    }
},

created(){
//获取数据
      var id= this.$route.query.id;
        _Playlist(id).then(res=>{
        this.playlistArr = res.data.playlist;
    })
},
watch:{
//当数据成功获取后playlistArr改变,执行以下代码
      playlistArr:function(){
          this.$nextTick(()=>{
            var h = document.getElementById("idu").offsetHeight;
            if(h>87){
            //显示message
                this.ishow = true;
            }
            else{
            //不显示message
                this.ishow = false;
            }
        })
      }
},
//计算属性
computed:{
//introduce是从playlistArr中取出来的
	introduce(){
	        let introduce = this.playlistArr.description.replace(/\n/g,"<br>");
	        return introduce;
	  }
 }

playlistArr是异步获取的数据

v-html=“introduce” introduce是从playlistArr中获取到的，所以watch里面数据绑定playlistArr也一样

this.$nextTick()是在DOM更新完成后使用它，这样才能通过document.getElementById(“idu”).offsetHeight 获取正确的数据