Vue вертикальная автоматическая прокрутка каждый раз

Question

Привет, я рендерил некоторые данные, разделенные на 3 группы списков начальной загрузки, используя vue, и мне нужно показать все на экране, что означает, что мне нужно автоматически прокручивать каждый список элементов.

Что-то, что я ищу, показывалось здесь с помощью jquery. https://codepen.io/jamesreegan/pen/OVMVvg

как я могу добиться этого в Vue? Или что-то вроде просто показать 5 пунктов и добавлять следующий элемент по одному каждый раз x

вот мой HTML

<div id="dashboard">

                <div class="row">
                    <div class="col-md-4">
                        <div class="list-group">

                            <div v-for="stock in stocks.abastecer" class="list-group-item list-group-item-action" v-autoscroll="'center'">

                                <div class="d-flex w-100 justify-content-between">
                                    <h5 class="mb-1">{{ stock.referencia }}</h5>
                                    <small>{{ stock.estado }}</small>
                                </div>

                                <p class="mb-1">
                                    @*<div line-progressbar :data-percentage=stock.percentagem data-progress-color="#1abc9c"></div>*@
                                    <vue-simple-progress size="medium"
                                                         :val=stock.percentagem
                                                         :text=stock.percentagem.toString()
                                                         bar-transition="all 2s ease">
                                    </vue-simple-progress>
                                </p>

                            </div>

                        </div>


                    </div>

                    <div class="col-md-4">
                        <div class="list-group">

                            <div v-for="stock in stocks.excesso" class="list-group-item list-group-item-action">

                                <div class="d-flex w-100 justify-content-between">
                                    <h5 class="mb-1">{{ stock.referencia }}</h5>
                                    <small>{{ stock.estado }}</small>
                                </div>

                                <p class="mb-1">
                                    @*<div line-progressbar :data-percentage=stock.percentagem data-progress-color="#1abc9c"></div>*@
                                    <vue-simple-progress size="medium"
                                                         :val=stock.percentagem
                                                         :text=stock.percentagem.toString()
                                                         bar-transition="all 2s ease">
                                    </vue-simple-progress>
                                </p>

                           </div>
                        </div>
                    </div>

                    <div class="col-md-4">

                        <div class="list-group">

                            <div v-for="stock in stocks.ok" class="list-group-item list-group-item-action">

                                <div class="d-flex w-100 justify-content-between">
                                    <h5 class="mb-1">{{ stock.referencia }}</h5>
                                    <small>{{ stock.estado }}</small>
                                </div>

                                <p class="mb-1">
                                    @*<div line-progressbar :data-percentage=stock.percentagem data-progress-color="#1abc9c"></div>*@
                                    <vue-simple-progress size="medium"
                                                         :val=stock.percentagem
                                                         :text=stock.percentagem.toString()
                                                         bar-transition="all 2s ease">
                                    </vue-simple-progress>
                                </p>

                           </div>
                        </div>
                    </div>
                </div>
            </div>

и JS

<script>

    var sector = 'UAP1'

    $('.progressbar').LineProgressbar();

    var dashboard = new Vue({
        el: '#dashboard',
        data: {
            stocks: []
        },
        mounted: function () {
            this.$http.get('/Dashboard/Index?handler=StocksBySector', { sector: sector }).then(response => {
                this.stocks = response.body;
            });
        }
    });



</script>