vue.js infinite scroll component WIP

infinite-scroll.vue

<template>
    <div>
        <pre v-text="$data | json"></pre>
    </div>
</template>

<script>
    export default {
        data (){
            return {
                coordinates: {
                    scrollTop: 0,
                    elementTop: 0,
                    visibleHeight: 0,
                },
                isAtBottom: false,
            }
        },
        watch: {
            isAtBottom(){
                this.$emit('at-bottom')
                console.log('at-bottom')
            },
        },
        ready (){
            let ready = function (){console.log('ready')}
            
            this.$parent.$el.addEventListener("scroll", ready)
            this.$parent.$el.onscroll = ready
            this.updateCoordinates()
        },
        methods: {
            updateCoordinates(){
                this.coordinates = {
                    scrollTop: this.$el.scrollTop,
                    elementTop: this.$el.getBoundingClientRect().top,
                    visibleHeight: document.documentElement.clientHeight,
                }

                this.isAtBottom = this.coordinates.elementTop < this.coordinates.visibleHeight
            }
        }
    }
</script>