Две проблемы с прокруткой 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>
    `,
})