Vue自定义指令directivs下定义的方法为何不执行

Question

在监听自定义指令时触发scroll事件，进行图片懒加载，但是在首次进入此页面路由时，图片不展示，怀疑是lazyLoad()方法未执行，当滚动滑轮是图片展示，问题来了，我调用了lazyLoad()但是此事件就是不执行， 求助大佬这问题如何解决，vue萌新，想大佬递茶。

首次加载

触发scroll事件

代码如下:

``html
<template>
<div class="welfare" v-scroll>

<div class="welfare-item" :data-id="item._id" v-if="welfare" v-for="(item,index) in welfare" :key="index">
  <img  :alt="item.type" :arouth="item.who" :data-src="item.url">
</div>

</div>
</template>
``
``javascript
import axios from 'axios'
export default {

beforeCreate(){
  //准备创建Dom元素进行占为，展示Loading动画
  //this.$store.commit('updateLoadingMark',true);
},
data(){
  return {
    welfare: [],
  }
},
mounted(){
  //钩子  模板挂载对象已准备完毕Dom加载完成,等待数据填充
  let _self = this;
  axios.get('http://gank.io/api/random/data/福利/20')
  .then((response)=>{
    if(response.status == 200 && response.data.results){
      _self.welfare = response.data.results;
      //改变vuex 的loadingMark展示状态
      this.$store.commit('updateLoadingMark',false);
    }else{
      return console.log('axios请求已发送,返回数据失败');
    }
  })
  .catch((error)=>{
    return console.log(error);
  });
},
computed:{
},
directives:{
  //自定义指令
  scroll:{
    bind:((el,binding,vnode,oldVnode)=>{
      let _self = vnode.context;
      lazyLoad();
      window.addEventListener('scroll',lazyLoad);
      function lazyLoad(){
        let welfareClientHeight = document.documentElement.clientHeight;
        let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        let childrens = vnode.elm.childNodes;
        let n = 0;
        // 延时展示
        for(let i = n; i<childrens.length; i++){
          if(childrens[i].offsetTop < welfareClientHeight + scrollTop){
            // 当前的展示图片小于可视区域加上滚动条的高度
            let _selfImg = childrens[i].firstChild.getAttribute('data-src');
            if(_selfImg.length >= 0){
              childrens[i].firstChild.src = _selfImg;
            };
            n = i + 1;
          };
        };
      };
    }),
  }
},
methods:{
  //laztLoad 懒加载图片
  lazyload(){
    //123
  },
}

}
``