Не смещать скролл при подгрузке данных VueJs

вывожу данные

<ul class="chat--messages__wrapper"  v-on:scroll.passive="onScroll" v-if="messages.length > 0">
    <li class="chat--messages__item"  v-for="(message,index) in messages">
        <div class="chat--user__data">
            <p class="last--massage" v-html="message.replay"></p>
        </div>
    </li>
</ul>

когда позиция скролла достигает 0 выполняется метод

onScroll(event){
        const that = this;
        if (event.target.scrollTop === 0){
            this.pagination.current_page += 1;
            axios.get('/profile/dialogs/messages',{
                params:{
                    dialog_id: this.dialogSelect,
                    page: this.pagination.current_page
                }
            })
            .then((response) => {
                $.each(response.data.messages.data, function(index,value){
                    that.messages.unshift(value);
                });

            })
            .catch(error => {});
        }
    }
},

как сделать так, чтобы после того как подгрузились данные, скролл остался на месте и можно листать вверх и смотреть, что подгрузилось, сейчас у меня скролл остается на вверху, а данные ниже смещаются, и нужно вниз листать, чтобы посмотреть, что подгрузилось