javascript - NuxtJS/Vue3: V-for med asynkron API-data fungerar inte korrekt (TS)

Jag arbetar för närvarande på ett Vue 3-projekt tillsammans med TypeScript.

Jag har ett API som skickar mig en array av objekt som innehåller detaljerna om varje server.

Jag har en skriptfil under /server/api/serverData.ts som hämtar dessa data åt mig

//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;
});

Här är ett exempel på resultat

[
  {
    "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"
  }
]

Jag har en Player Info-komponent under /Player/Info.vue med egenskaper

<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>

Jag använder det inuti min app.vue i rotkatalogen på detta sätt:

<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>

Som du kan se, visar det inte data från den json jag tar emot. Jag försökte använda v-for på ett annat sätt, men det gav mig bara fel.

Vad har jag missat - är mitt tillvägagångssätt med ref fortfarande aktuellt? Jag vill i princip bara iterera över min komponent för varje serverobjekt i arrayen så här

ServerNamn SpelarAntal

ServerNamn SpelarAntal

...