Unable to use "id" for NuxtLink in iteration

[crunchwrap89]

Reproduction

Will try to add next week

Steps to reproduce the bug

<script setup lang="ts">
const db = useDatabase();
const { promise } = useDatabaseList<MapData>(dbRef(db, 'mapData'));
const data = await promise.value;
</script>

<template>
          <div
            v-for="(m, i) in data"
            :key="m.id"
          >
              <NuxtLink :to="`/page/${m.id}`">
                  {{ m.name }}
              </NuxtLink>
          </div>
</template>

Expected behavior

NuxtLink should send user to /page/id

Actual behavior

NuxtLink sends user to /page/undefined

Additional information

I am guessing that this has something to do with the "readonly" property(?) but i wonder if there is any way to go around this? I would like to pass the id to later on be able to get data from that specific id.