Vue Js Infinite Scrolling

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
        <h2>Vue Js infinte Scrolling</h2>
    <div id="app">
         <div id="scroll-container" @scroll="handleScroll">
            <div v-for="image in images" :key="image.id">
                <img :src="image.previewURL" :alt="image.tags" @load="handleImageLoad">
            </div>
            <div v-if="loading">Loading...</div>
            <div v-if="error">{{ error }}</div>
        </div>
    </div>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    images: [],
                    page: 1,
                    perPage: 8,
                    loading: false,
                    error: null,
                    imageCount: 0,
                };
            },
            methods: {
                handleScroll() {
                    const container = document.getElementById('scroll-container');
                    const atBottom = container.scrollTop + container.offsetHeight >= container.scrollHeight;

if (atBottom && !this.loading) {
                        this.loading = true;
                        axios
                            .get(`https://pixabay.com/api/?key=34464713-d6983b6f7516f75f27cdcbb6b&q=nature&page=${this.page}&per_page=${this.perPage}`)
                            .then(response => {
                                console.log(response.data);
                                this.page++;
                                const newImages = response.data.hits.filter(hit => !this.images.some(image => image.id === hit.id));
                                this.images = [...this.images, ...newImages];
                                this.loading = false;
                            })
                            .catch(error => {
                                console.error(error);
                                this.error = 'Error loading images. Please try again later.';
                                this.loading = false;
                            });
                    }
                },
                handleImageLoad() {
                    this.imageCount++;
                },
            },
            mounted() {
                this.handleScroll();
            },
        });
    </script>
    <style scoped>
        #scroll-container {
            height: 225px;
            /* Set a fixed height for the container */
            overflow-y: scroll;
            /* Enable vertical scrolling */
            display: flex;
            /* Use flexbox to align items */
            flex-wrap: wrap;
            /* Allow images to wrap to next row */
            gap: 10px;
            /* Add some space between images */

}

#scroll-container img {
            display: block;
            /* Remove default inline display */
            width: 100%;
            /* Make images fill their container */
            height: auto;
            /* Maintain aspect ratio of images */
            object-fit: cover;
            /* Crop images to fit container */
            border-radius: 5px;
            /* Add rounded corners to images */
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
            /* Add a subtle drop shadow */
        }

#scroll-container div {
            text-align: center;
            /* Center loading and error messages */
            margin-top: 20px;
            /* Add some space above messages */
            font-size: 20px;
            /* Increase font size of messages */
            font-weight: bold;
            /* Add bold font weight to messages */
            color: #666;
            /* Use a muted text color for messages */
        }
    </style>
</body>

</html>