better-scroll 和v-show导致不能滚动的bug

我是一个页面多个子组件，每个子组件都有一个BScroll，通过v-show判断显示子组件

<medical-card v-show="pageIndex == 0"></medical-card>
<health-records v-show="pageIndex == 1" ref="healthRecords" ></health-records>
 <historical-order v-show="pageIndex == 2" ref="historicalOrder"></historical-order>

导致后面两个子组件不能滚动
原因是 v-show=false 时 display为none 子组件没有高度导致内部的scroll没有高度，所以不能滚动
解决：判断v-show=true时主动刷新scroll

function tabsClickAction(index) {
      state.pageIndex = index;
      if (index == 1) {
        healthRecords.value.refreshPage();
      }
      if (index == 2) {
        historicalOrder.value.refreshPage();
      }
      console.log(state.pageIndex);
    }

子组件内部方法

function refreshPage() {
    scroll.value.refresh();
}