Vue3/Ionic: автоматическая прокрутка вниз

Я пишу приложение VueJS с Ionic. Приложение также имеет чат. Очевидно, вы хотите видеть самое последнее сообщение, а не самое старое, поэтому приложение должно открываться с прокруткой контейнера вниз (также каждый раз, когда вы получаете новое сообщение, вы хотите, чтобы оно появлялось внизу).

Мой HTML-шаблон (части):

 <ion-content
:scroll-events="true">
 <ion-grid>
 <ion-row v-for="(message, index) in messages" v-bind:key="index"
:id="(index === messages.length-1)? 'bottomMessage': 'notLastMessage'">
 <ion-col
 size="9"
:offset="message.fromUsrName === user.name? 3: 0 "
:class="
 message.fromUsrName === user.name
? 'my-message'
: 'other-message'
 "
 >
 <b>{{ message.fromUsrName }}</b
 ><br/>
 <span>{{ message.text }}</span>
 <div class="time">
 {{ new Date(message.timestamp).toLocaleString() }}
 </div>
 </ion-col>
 </ion-row>
 </ion-grid>
 </ion-content>

Я пробовал следующее:

const element = document.querySelector('ion-grid')
element.scrollTop = element.scrollHeight;

document.querySelector('ion-content').scrollToBottom(0);

const messageDiv = document.getElementById('bottomMessage')
if (messageDiv) {
 messageDiv.scrollIntoView({behavior: "smooth"});
} else {
 console.log("no messageDiv");
}

и предлагаемый ответ здесь:
Прокрутите до конца div?

РЕДАКТИРОВАТЬ:
я также попробовал то, что предложил
@Phil0xFF:

scrollToBottom: function () {
 console.log("scrollToBottom");
 const element = document.getElementById('content');
 if (element) {
 element.scrollToBottom(0);
 console.log("scrolled");
 } else {
 console.log("no div");
 }
 }

и консоль показывает следующее:

scrollToBottom Chat.vue:171
scrolled Chat.vue:175
scrollToBottom Chat.vue:171
scrolled Chat.vue:175

РЕДАКТИРОВАТЬ КОНЕЦ

Ничто из этого не работает, он вообще отказывается прокручиваться. Я также не получаю никакого сообщения об ошибке, я также проверил, что document.querySelector (и document.getElementById) действительно находит элемент.

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

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

(Я начинаю сомневаться в своем интеллекте, это довольно распространенный вариант использования, не так ли?)

Решение проблемы

У меня была такая же ошибка в моем проекте, и после многих часов разочарования я нашел решение.

Похоже, что у селектора запросов есть какие-то проблемы после маршрутизации по разным страницам. Мне удалось устранить ошибку, присвоив элементу ion-content идентификатор и используя этот идентификатор для выбора элемента.

<ion-content id="content"></ion-content>
const element: any = document.getElementById('content');
element.scrollToBottom(0);

В совершенно новом проекте я не смог воспроизвести ошибку, поэтому не уверен, что это проблема Ionic.