Как автоматически прокрутить блок вниз?

Есть блок

<div class="oldComments mb-3" ref="oldComments">
            <ul class="commentList">
                <li v-for="(comment,i) in history" :key="i" class="comment">
                    <span class="date">Сообщение от: {{comment.date}}</span><br>
                    <span class="name">{{comment.name}}: </span>
                    <span>{{comment.text}}</span>
                    <hr>
                </li>
            </ul>
        </div>

В хуке mounted идет загрузка комментариев

axios
                .get(url)
                .then(function (response) {
                    if (response.data.status){
                        that.history = response.data.result
                        that.scrollToEnd()
                    }
                })
                .catch(function (error) {
                    console.log(error);
                })

После загрузке методом scrollToEnd() я хочу прокрутить блок вниз, сам метод

scrollToEnd: function() {    
            let messageDisplay = this.$refs.oldComments;
            this.$refs.oldComments.scrollTop = messageDisplay.scrollHeight;
        }

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