[1572] endless loading no working

I want to do endless loading of my goods. For this, I create a scroll.js file. The function loadData () using axios makes a get request and receives the data and sends it to the data (vue). There is also a .vue page where you need to substitute these data. I'm trying to do this with <no -ssr> but I do not fully understand how?

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);
            });
    }
});

.vue

<template>
<div>
    <FormLine/>
    <div class="grid preview-list" id='preview-list' data-url="https://jsonplaceholder.typicode.com/photos">
        <div class="tovar container preview-list-items" id="preview-list-items">
            <no-ssr placeholder="Loading">

            <div class="hidden_tovar" v-for="good in goods" @click="goToLink">

                <a :href="'/product/'+good.id"><img :src="good.image" alt="" class="big"></a>


                <div class="info">
                    <span class="brand">“{{good.brend}}”</span>
                    <h2 class="goodsTitle">{{good.title}}</h2>
                    <p class="desc goodsDesc">{{good.description}}</p>
                </div>

                <div class="prices">
                    <nuxt-link :to="'/product/'+good.id"><img :src="good.image" alt="" class="mini"></nuxt-link>
                    <div class="price">от<span class="goodsPrice">{{good.min_price}}</span><span class="rub">С</span></div>
                            <div class="tovar_hidden_box_content">
                                <div><p>{{good.sostav}}</p></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            </no-ssr>
        </div>
            <div class="sale"></div>
    </div>
    <div class="clear-both"></div>
    <div id="preview-buttons">
    </div>
    <div class="clear-both"></div>
    <!--</div>-->
</div>
</template>

<script>
    import FormLine from '~/components/formLine'
    export default {

        head: {
            script: [
                { src: '/js/scroll.js' }