Javascript Vue上聊天的延迟加载

我有一个问题，一个包含消息的数组通过API发送给我，我希望显示前20条消息。但当用户向上滚动时，会加载新消息。我怎样才能做到最好

<template>
  <div ref="scrollList" class="sc-message-list" :style="{backgroundColor: colors.messageList.bg}" @scroll="handleScroll">
    <Message
      v-for="(message, idx) in messages"
      :key="idx"
      :message="message"
      :user="profile(message.author)"
      :colors="colors"
      :message-styling="messageStyling"
      :show-edition="showEdition"
      :show-deletion="showDeletion"
      @remove="$emit('remove', message)"
      @pin="$emit('pin', message)"
    >
      <template v-slot:user-avatar="scopedProps">
        <slot name="user-avatar" :user="scopedProps.user" :message="scopedProps.message" />
      </template>
      <template v-slot:text-message-body="scopedProps">
        <slot name="text-message-body" :message="scopedProps.message" :messageText="scopedProps.messageText" :messageColors="scopedProps.messageColors" :me="scopedProps.me" />
      </template>
      <template v-slot:system-message-body="scopedProps">
        <slot name="system-message-body" :message="scopedProps.message" />
      </template>
      <template v-slot:text-message-toolbox="scopedProps">
        <slot name="text-message-toolbox" :message="scopedProps.message" :me="scopedProps.me" />
      </template>
    </Message>
  </div>
</template>