Ddpl

<template>
  <div v-for="i of items" :key="i">{{i}}</div>
</template>

<script setup>
import {ref, computed, onMounted} from "vue";

const data = ["1q", "2w", "3e", "4r", "5t", "6y"];
function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}
  
const items = ref([]);
onMounted(async () => {
  for (const value of data) {
    items.value.push(value);
    await sleep(1000);
  }
});
</script>

const limit = ref(0);
const items = computed(() => {
  return data.slice(0, limit.value);
});
onMounted(async () => {
  while (limit.value < data.length) {
    limit.value++;
    await sleep(1000);
  }
});