javascript - NuxtJS/Vue3: V-for con datos de API asincrónicos que no funcionan correctamente (TS)

Actualmente estoy trabajando en un proyecto de Vue 3 junto con TypeScript.

Tengo una API que me envía un arreglo de objetos que contienen los detalles de cada servidor.

Tengo un archivo de script en /server/api/serverData.ts que me obtiene estos datos

//we want to fetch asnyc
export default defineEventHandler(async (event) => {
  //fetch from uri using $fetch from nuxt
  const data = await $fetch("https://game.aq3d.com/api/game/ServerList");
  //return data
  return data;
});

Aquí hay un ejemplo de salida

[
  {
    "ID": 1,
    "SortIndex": 1,
    "Name": "Red Dragon",
    "HostName": "nextdragon.aq3d.com",
    "Port": 5594,
    "UserCount": 754,
    "MaxUsers": 900,
    "State": true,
    "Chat": true,
    "Language": "en",
    "IP": "",
    "LocalIP": "",
    "LastUpdated": "2022-12-30T15:22:00",
    "Connections": 737,
    "GEMQueueLength": 2484,
    "AlertLevel": 1,
    "Status": 1,
    "Region": "NA"
  },
  {
    "ID": 4,
    "SortIndex": 16,
    "Name": "Localhost",
    "HostName": "localhost",
    "Port": 5591,
    "MaxUsers": 900,
    "State": true,
    "Chat": true,
    "Language": "en",
    "IP": "",
    "LocalIP": "",
    "LastUpdated": "2022-07-01T15:48:00",
    "AccessLevel": 100,
    "AlertLevel": -1,
    "Status": 0,
    "Region": "NA"
  },
  {
    "ID": 7,
    "SortIndex": 4,
    "Name": "Blue Dragon",
    "HostName": "game.dragon.aq3d.com",
    "Port": 5594,
    "UserCount": 180,
    "MaxUsers": 900,
    "State": true,
    "Chat": true,
    "Language": "en",
    "IP": "",
    "LocalIP": "",
    "LastUpdated": "2022-12-30T15:22:00",
    "Connections": 178,
    "AlertLevel": 1,
    "Status": 1,
    "Region": "NA"
  },
  {
    "ID": 10,
    "SortIndex": 7,
    "Name": "Black Dragon",
    "HostName": "game.dragon.aq3d.com",
    "Port": 5593,
    "UserCount": 1,
    "MaxUsers": 900,
    "State": true,
    "Chat": true,
    "Language": "en",
    "IP": "",
    "LocalIP": "",
    "LastUpdated": "2022-12-30T15:22:00",
    "AccessLevel": 100,
    "Connections": 1,
    "AlertLevel": 1,
    "Status": 1,
    "Region": "NA"
  },
  {
    "ID": 11,
    "SortIndex": 8,
    "Name": "Green Dragon  [EU]",
    "HostName": "nextdragon.aq3d.com",
    "Port": 5590,
    "UserCount": 128,
    "MaxUsers": 900,
    "State": true,
    "Chat": true,
    "Language": "en",
    "IP": "",
    "LocalIP": "",
    "LastUpdated": "2022-12-30T15:22:00",
    "Connections": 123,
    "AlertLevel": 1,
    "Status": 1,
    "Region": "EU"
  },
  {
    "ID": 12,
    "SortIndex": 9,
    "Name": "Gold Dragon [SEA]",
    "HostName": "nextdragon.aq3d.com",
    "Port": 5591,
    "UserCount": 57,
    "MaxUsers": 900,
    "State": true,
    "Chat": true,
    "Language": "en",
    "IP": "",
    "LocalIP": "",
    "LastUpdated": "2022-12-30T15:22:00",
    "Connections": 55,
    "AlertLevel": 1,
    "Status": 1,
    "Region": "AS"
  }
]

Tengo un componente Player Info en /Player/Info.vue con propiedades

<script setup lang="ts">
interface PlayerProps {
    serverName: string;
    playerAmount: number;
    // maxPlayer: number;
    // connections: number;
}

const props = defineProps<PlayerProps>();


</script>
<template>
    <div>
        <h1>Player Information</h1>
        <h2>{{ serverName }}</h2>
        <h2>{{ playerAmount }}</h2>
    </div>
</template>

Lo uso dentro de mi app.vue dentro del directorio raíz así:

<script setup lang="ts">
const servers = ref<any>([]);
const apiData = await useFetch('/api/serverData')


//assign apiData to apiRef
servers.value = apiData
console.log(servers.value)


</script>
<template>
  <div>
    <h1>AQ3D Server Status Infos</h1>
    <PlayerInfo  v-for="(server, index) in servers" :serverName="Name" :playerAmount="UserCount" />
  </div>
</template>

Como puedes ver, no está mostrando los datos del json que recibo. Intenté usar el v-for de manera diferente, pero esto solo me dio errores.

¿Qué me perdí? ¿Mi enfoque con la referencia sigue siendo válido? Básicamente, solo quiero iterar sobre mi componente para cada objeto de servidor dentro del arreglo así

NombreDelServidor CantidadDeJugadores

...