Vue3 не отображaет данные при использовании sfc (script setup)

Проблема в заголовке. Код:

<template>
    <pre>
      {{ apiData }}  // Отображает на странице: []
    </pre>
  </div>
</template>

<script lang="ts" setup>
import { ref, onBeforeMount } from 'vue'
import axios from "axios"

import { TestData } from '@multi-app/general-types'

let apiData = ref<TestData>([])

onBeforeMount( async () => {
  await axios.get<TestData[]>('http://localhost:3333/api/')
  .then(res => {
    console.log(res.data)  // [{id: 1, text: '123'}]
    apiData = res.data
  })
})

</script>

Интерфейс типа TestData:

export interface TestData {
  id: number;
  text: string;
}

Подскажите, как правильно задать переменную в таком варианте реализации и поместить в нее данные из axios запроса?