Vue滚动存在两个问题：连发两次是主要问题

Question

好吧，我正在尝试制作一个Vue组件，当它滚动到屏幕顶部时会触发特定事件（这意味着如果我有五个这样的组件，则每个组件到达页面顶部时都会触发）。但是，在向组件添加事件侦听器后，每次滚动它都会触发两次。更糟糕的是，如果告诉它console.log包装元素的offsetHeight，它将记录两个不同的值（一个为顶部，一个为底部）。我非常困惑。

对于处理滚动问题，我也很乐意为您提供建议。

Vue.component( 'entry-main-item', {
    props:['logoImage', 'backgroundImagearray', 'passLarge', 'passSmall', 'colorNumber'],
    mounted(){

        this.loaded=!this.loaded;
        setInterval(()=>{this.currentindex=(this.currentindex+1)%3;}, 3000);
    },
    created () {
        window.addEventListener('scroll', this.handleScroll);
    },
    methods:{
        hoverstate(){
            this.hover=!this.hover;
        },
        handleScroll (event) {
            let x = this.$refs.position;
            // console.log(x.getBoundingClientRect().top)
            console.log(window.scrollY)
    }
    },
    data(){
        return{
            loaded: false,
            hover: false,
            imageaddress: "url(images/"+this.logoImage+")",
            currentindex: 0,
            colorclass: ['EMIcontainer','EMIcontainer2'][this.colorNumber],
        }
    },
    template:`
    <div ref="position">

   <transition-group name="EMIcontainerenter" tag="div">
    <div v-if="loaded" v-for="(item, index) in backgroundImagearray" :key="index">
      <div class="EMIbackgroundimage">
      <transition name="EMIbackgroundimageenter">
      <img v-if="currentindex==index" :src="backgroundImagearray[index]">
      </transition>
      </div>
      </div>
     </transition-group>


    <transition name="EMIcontainerenter">
     <div v-if="loaded" @mouseenter="hoverstate" @mouseleave="hoverstate" :class="colorclass">
     <transition name="EMIwhiteenter">
     <div v-if="hover" class="EMIwhiteborder">
     <transition name="EMIlogoenter">
    <div v-if="hover" :style='{backgroundImage: imageaddress}' class="EMIlogo"></div>
     </transition>
     </div>
     </transition>
     </div>


     </transition>

    </div>
    `,
})