[Vuejs]-Merge all scroll handlers to one from all components

One of the ways you could do this, is by including the logic inside your app.vue, where you also load your <router-view> tag:

We then pass the prop down to the individual pages, where we can use it:

App.vue

<template>
    <div class="page__content">
        <router-view :scrolled="scrolled"/>
    </div>
</template>
<script>
export default{
    data(){
        scrolled: false
    },
    mounted(){
        // Its better use a vue ref here
        document.querySelectorAll('.page__content').forEach((el) => {
            el.onscroll = () => {
                if (el.scrollTop >= 200) {
                    this.scrolled = true;
                } else {
                    this.scrolled = false;
                }
            }
        });
    }

}
</script>

comp2.vue

export default{
    props: {
        scrolled: {
            type: Boolean,
            required: true,
        },
    },
    computed: {
        showUsersList() {
            if(this.scrolled) {
                return 1;
            } else {
                return 0;
            }
        },
    },
    mounted(){
    }
}