[1657] Scrolling

Hello. I already created a similar issue but no one answered. I moved a little further into its implementation. Now I'm using viex to store data, but I still do not understand how to apply my scroll.js to my .vue page.

photos.vue

<template>
    <div>
        <div v-for="photo in photoItems">
            <p>{{photo.id}}</p>
            <img :src="photo.url" alt="">
        </div>
    </div>
</template>


<script>
    export default {
        computed: {
            photoItems () { return this.$store.state.photos.photoItems}
        },
        created () {
            this.$store.dispatch('photos/fetchPhotos')
        }
    }
</script>

store/photos.js

import Axios from 'axios'

export const state = () => ({
    photoItems: []
})

export const actions = {
    fetchPhotos (state) {
        Axios.get('https://jsonplaceholder.typicode.com/photos')
            .then((res) => {
            state.commit('setPhotos', res.data.slice(0,50))
    })
    }
}

export const mutations = {
setPhotos: (state, data) => {
    state.photoItems = Object.assign({}, data)
}
}

And my scroll.js

var app = new Vue({
    el: '#preview-list',
    data: {
        goods: []
    }
});
$(function() {

    var imgs = app.goods;
    var prevScroll = 0,
        step = 1,
        requestAllowed = true,
        $pagination = $('.clear-both'),
        $list = $('#preview-list-items'),
        limit = 6,
        offset = 0,
        url ='https://jsonplaceholder.typicode.com/photos';
    loadData();
    console.log('2', imgs);


    $(window).scroll(function() {

        var scroll = $(window).scrollTop(),
            endOfProducts = $pagination.offset().top - $(window).height(),
            direction = scroll > prevScroll,
            stepMap = step >= 0 && step <= 3;

        if (step == 3) {
            requestAllowed = false;
            $('#preview-buttons a').show();
        } else {
            $('#preview-buttons a').hide();
        }

        if (scroll > endOfProducts && requestAllowed && direction && stepMap) {
            loadData();
        }

        prevScroll = scroll;
    });

    $('#preview-show-more').click(function() {
        $(this).blur();
        step = 0;
        requestAllowed = true;
        $('#preview-buttons a').hide();
        loadData();
    });


    function loadData() {

        requestAllowed = false;
        axios.get(url)
            .then(function (response) {
                requestAllowed = true;
                var data = [];
                for (var i = 0, max = response.data.length; i < max; i++) {
                    imgs.push(response.data[i]);
                }
                imgs.length = limit;
                console.log('i', imgs);
                limit += limit;
                step++;
            })
            .catch(function (error) {
                console.log(error);
            });
    }
});