paste the structure code: hasVerticalScroll has a value for true,scrollerHeight, if I set overflow-y:auto; for class menu-wrapper and foods-wrapper The style is also completely fine, and the print better-scroll initialization is also fine.
add: I found a strange problem. No matter whether it is a vuex call or a re-call, no matter at any stage of the life cycle to execute the calling function this.initScroll (), print, it is also given to me undfined.mounted ().

1.HTML:

<div class="goods">
    <!-- , -->
    <div class="menu-wrapper" ref="menuScroll">
      <ul>
        <li class="menu-item"></li>
      </ul>
    </div>
    <!-- , -->
    <div class="foods-wrapper" ref="foodScroll">
      <ul>
        <!--  -->
        <li class="container-list"></li>
        <!--  -->
        <li class="food-list" v-for="(item,index) in setGoods" :key="index">
          <h3 class="title">{{item.name}}</h3>
          <!--  -->
          <ul>
            <li class="food-item"></li>
          </ul>
        </li>
      </ul>
     
    </div>
<div class="goods">

2.CSS structure code, Sass: used

.goods{
    display: flex;
    position: absolute;
    top: 190px;
    bottom: 51px;
    overflow: hidden;
    width: 100%;
    
    // 
    .menu-wrapper{
      flex: 0 0 85px;
      background: -sharpF4F4F4;
      // overflow-y: auto;
      .menu-item{
        padding: 19px 23px 9px 10px;
        border-bottom: 1px solid -sharpE4E4E4;
        position: relative;
      }
     }
     
     // 
    .foods-wrapper{
      flex: 1;
      .container-list{
        padding: 11px 11px 0 11px;
        border-bottom: 1px solid -sharpE4E4E4;
      }
      .food-list{
        padding: 11px;
        .title{
          height: 13px;
          font-size: 13px;
          background: url("../../assets/btn_yellow_highlighted@2x.png") no-repeat left center;
          background-size: 2px 10px;
          padding-left: 7px;
          margin-bottom: 12px;
        }
        .food-item{
          display: flex;
          margin-bottom: 25px;
          position: relative;
        }
      }
      
     }
     
 

3.JS Code:

<script>
  import BScroll from "better-scroll"
  
  export default {
   name: "goods",
   data() {
    return {        
     seteContainers: {},
     setGoods: [],
    }
   },
   methods: {
    initScroll (){  //
     new this.BScroll(this.$refs.menuScroll)
     new this.BScroll(this.$refs.foodScroll)
    }
   },
   created (){
    this.http.get("/api/goos").then(response => {
     if(response.data.code == 0){
      this.seteContainers = response.data.data.container_operation_source;
      this.setGoods = response.data.data.food_spu_tags;
       //
       this.initScroll()
     }
    })
   }        
  }
</script>
    

4. Printed new this.BScroll (this.$refs.menuScroll):