QInfiniteScroll reverse not working

[elliott]

I’m trying to get the reverse property to work on QInfiniteScroll but it doesn’t scroll my messages to the bottom. Any help would be great! Here’s some example code:

<template>
	<q-page padding class="column">
		<q-infinite-scroll
			class="col column q-gutter-y-sm"
			:style="inputOffset"
			@load="onLoad"
			:offset="250"
			reverse
		>
			<q-chat-message
				v-for="message in messages"
				:key="message.text"
				:text="[message.text]"
			/>
		</q-infinite-scroll>
		<p
			class="text-grey"
			v-if="!loading && hasLoaded && messages.length === 0"
		>
			No messages yet. Be the one to get it going!
		</p>
		<q-page-sticky expand position="bottom" class="q-pa-sm">
			<q-form
				class="full-width row q-gutter-x-sm"
				style="background: rgba(255,255,255,0.7)"
				ref="messageEntryComp"
				@submit="saveMessage"
			>
				<q-input
					class="col bg-white"
					outlined
					v-model="formData.message"
					autogrow
					dense
					placeholder="Type your message here"
				/>
				<q-btn
					size="lg"
					class="col-auto"
					type="submit"
					icon="send"
					color="primary"
				/>
			</q-form>
			<q-resize-observer @resize="onResizeInputComp" />
		</q-page-sticky>
	</q-page>
</template>

<script>
import Vue from 'vue';

export default {
	props: {
		id: {
			type: String,
			required: true,
		},
	},
	data() {
		return {
			loading: false,
			hasLoaded: false,
			messages: [
				{ text: '1' },
				{ text: '2' },
				{ text: '3' },
				{ text: '4' },
				{ text: '5' },
				{ text: '6' },
				{ text: '7' },
				{ text: '8' },
				{ text: '9' },
				{ text: '10' },
				{ text: '11' },
				{ text: '12' },
				{ text: '13' },
			],
			formData: {
				message: '',
			},
			inputOffset: {
				'margin-bottom': 0,
			},
		};
	},
	methods: {
		async onLoad(index, done) {
			if (this.messages.length % 50 === 0) {
				const moreMessages = await this.loadMore(index - 1);
				this.messages = this.messages.concat(moreMessages);
				this.hasLoaded = true;
				done(moreMessages.length !== 50);
			} else {
				done(true);
			}
		},
		async loadMore(offset) {
			const res = await this.$axios.get(
				`/events/${this.id}/messages?offset=${offset || 0}`
			);
			return res.data;
		},
		onResizeInputComp(size) {
			Vue.set(this.inputOffset, 'margin-bottom', size.height + 10 + 'px');
		},
	},
};
</script>