vue v-if导致父组件$ref引用子组件方法undefined

// An highlighted block
<ul>
      <li>
        <div v-if="menus&&menus.includes('销售')" id="sale">
          <sale ref="sale"></sale>
        </div>
      </li>
      <li>
        <div v-if="menus&&menus.includes('客服')" id="cus">
          <custome ref="cus"></custome>
        </div>
      </li>
</ul>

methods:{   //methods里面调用子组件方法
	// 页面 滚动 事件
    handleScroll() {
    	if (*****) {
              this.$nextTick(() => {
                this.$refs['***']].getArea(); //子方法
              });
         }
	}
}

mounted() {
	if(this.$refs.sale){ // 1种  ***判断有没有再使用nextTick***
      this.$nextTick(()=> {
        this.$refs.sale.getArea();
      })
    }

	window.addEventListener("scroll", this.handleScroll, true); //2种
}

总结： ref和v-for v-if一起使用会出现问题 ，undefined绝大多数情况是因为DOM节点渲染