Render during array updates

I have a Vue3 component where I can drag a file, get the stream end do the decoding.
The result of that decoding is an iterator, messages in this case.
I see all results after everything is done, but I would like to see the results faster. Is there a way to force the render faster?

Here is an example. With console.log I see the messages decoding, but there is nothing rendered until all is done. I tried updating messages in other ways like messages.value = [...messages.value, msg], but with the same result.

<script setup>
import { ref } from 'vue'

let messages = ref([])

async function processFile(file) {
    const messages = await Foo.decode(file.stream())
    for await (var msg of messages()) {
      console.log({msg})
      messages.value.push(msg)
    }
}

function handleDrop(ev) {
  if (ev.dataTransfer.items) {
    ;[...ev.dataTransfer.items].forEach((item) => {
      if (item.kind === 'file') {
        const file = item.getAsFile()
        processFile(file)
      }
    })
  } else {
    // Use DataTransfer interface to access the file(s)
    ;[...ev.dataTransfer.files].forEach((file) => {
      processFile(file)
    })
  }
}
</script>

<template>
  <div
    class="dropzone"
    v-on:dragover.prevent="() => ..."
    v-on:drop.prevent="handleDrop"
    v-on:dragleave.prevent="() => ..."
  >
    Drop here
  </div>
  <div v-for="(message, index) in messages" :key="index">
    {{message.something}}
  </div>
</template>