IonContent ScrollToBottom not working when getting data by axios

Hi,

I’m writing a small chat app in Ionic Vue, which is also my first Ionic Project. I have a big problem regarding the content area:

When the messages are loaded from the rest api, scrollToBottom does not work, when I add the messages hardcodes as an object, it works perfectly - what am I doing wrong here?

That’s my code:

<template>
    <ion-page>
        <ion-header color="primary">
            <ion-toolbar>
                <ion-buttons slot="start">
                    <ion-back-button text="" color="light" :icon="chevronBackOutline"></ion-back-button>
                </ion-buttons>
                <div>
                    <h1 class="text-xl text-white font-bold ml-4 pt-2" style="line-height: 45px;">{{ channel.title }}</h1>
                </div>
            </ion-toolbar>
        </ion-header>

        <ion-content fullscreen>
            <ion-list>
                <ion-item
                        v-for="(message,index) in messageList"
                        v-bind:key="index"
                        lines="none"
                >
                    <div
                            class="flex w-full mb-2"
                    >
                        <div
                                :class="{ 'w-full inline-flex pr-12': !message.me, 'w-full inline-flex justify-end pl-12': message.me }"
                        >
                            <div>
                                <ion-avatar>
                                    <img :src="message.icon"/>
                                </ion-avatar>
                            </div>
                            <div>
                                <div class="border rounded-lg bg-white px-3 py-2 text-gray-700 bg-gray-200">
                                    <p class="text-xs username">{{ message.user }}</p>
                                    <p class="text-xs font-semibold">{{ message.message }}</p>
                                </div>
                                <p class="timestamp ml-3 text-xs">{{ message.created }}</p>
                            </div>
                        </div>
                    </div>

                </ion-item>
            </ion-list>
        </ion-content>

        <ion-footer class="border-t bg-white">
            <div class="flex">
                <div class="w-full py-2 px-2">
                    <ion-textarea class="text-sm font-semibold border rounded px-2 text-gray-700"
                                  placeholder="Deine Nachricht" auto-grow rows="1"
                                  v-model="mymessage"
                                  required
                    ></ion-textarea>
                </div>
                <div class="py-1">
                    <ion-button
                            class="bg-ci-color px-2 py-1 rounded-full pt-1 outline-none"
                            size="small"
                            @click="sendMessage();"
                    >
                        <ion-icon :icon="rocketOutline" size="small"></ion-icon>
                    </ion-button>
                </div>
            </div>
        </ion-footer>

    </ion-page>
</template>

<script>
    import {
        IonPage,
        IonContent,
        IonHeader,
        IonIcon,
        IonFooter,
        IonTextarea,
        IonButton,
        IonAvatar,
        IonToolbar,
        IonButtons,
        IonBackButton,
        IonList,
        IonItem,
    } from '@ionic/vue'
    import {chevronBackOutline, rocketOutline} from 'ionicons/icons'
    import appDefaults from "../../config"

    import Echo from 'laravel-echo'
    import axios from 'axios'

    window.Pusher = require('pusher-js')

    export default {
        name: "Chat",
        components: {
            IonPage,
            IonContent,
            IonHeader,
            IonIcon,
            IonFooter,
            IonTextarea,
            IonButton,
            IonAvatar,
            IonToolbar,
            IonButtons,
            IonBackButton,
            IonList,
            IonItem,
        },
        data() {
            return {
                chatId: '',
                messageList: {},
                channel: [],
                mymessage: '',
                echo: null,
            }
        },
        setup() {
            return {
                chevronBackOutline,
                rocketOutline,
            }
        },
        created() {
            this.chatId = this.$route.params.channel

        },
        mounted() {
            this.loadMessages()
            this.connect()
            this.joinChannel()
            this.listenToVisibility()
        },
        methods: {
            connect: function () {
                window.Echo = new Echo({
                    broadcaster: 'pusher',
                    key: appDefaults.pusherKey,
                    ....
                    ....
                    ....
                    ....
                });
            },
            joinChannel: function () {
                window.Echo
                    .join('XYZchannel.' + this.chatId)
                    .listen('MessageSentEvent', (event) => {
                        if (event.message.user_uuid == undefined) {
                            this.messageList.push({
                                user: event.message.user,
                                message: event.message.message,
                                created: event.message.created,
                                icon: event.message.icon,
                                me: event.message.me,
                            });
                        }
                    })
                    .listenForWhisper('typing', user => {
                        this.userActive = user;

                        if (this.activeTimer) {
                            clearTimeout(this.activeTimer);
                        }

                        this.activeTimer = setTimeout(() => {
                            this.userActive = false;
                        }, 3000);
                    });
            },
            listenToVisibility: function () {
                window.Echo
                    .join('XYZvisibility.' + this.chatId)
                    .listen('ChannelVisibilityEvent', (event) => {
                        ....
                        ....
                        ....
                    });
            },
            loadMessages: function () {
                axios.defaults.headers.common['Authorization'] = 'Bearer ' + this.$store.getters.getToken

                axios.get('getMessages?channel=' + this.chatId)
                    .then(response => {
                        this.messageList = response.data.data
                        this.channel = response.data.channel
                        this.scrollToBottom()
                    })
                    .catch(error => {
                        console.log(error)
                    })
            },
            sendMessage: function () {
                ...
                ...
                ...
                ...
                ...
                
            },
            getContent() {
                console.log('get content')
                return document.querySelector('ion-content')
            },
            scrollToBottom() {
                console.log('scroll to bottom')
                this.getContent().scrollToBottom(500)
            },
        },
    }
</script>

<style scoped>
    ion-toolbar {
        --ion-toolbar-background: var(--ion-color-primary);
    }

    ion-icon {
        font-size: 25px;
        color: white;
    }

    p.timestamp {
        font-size: 10px;
    }

    p.username {
        font-size: 10px;
    }

    ion-footer {
        --ion-background-color: #fff;
    }
</style>

It’s about the loadMessages and the scrollToBottom methods.

Thank you so much for your help.

Sascha