Nuxt useFetch: data accessible only using v-for

I attempt to fetch and display username from my API. However user.username couldn’t be accessed normal way:

<script setup>
definePageMeta({
  layout: "dashboard",
});
const token = useCookie("token");
const { data: user } = await useFetch("http://127.0.0.1:8000/auth/", {
  onRequest({ options }) {
    options.headers = options.headers || {};
    options.headers.authorization = `Bearer ${token.value}`;
  },
});
console.log(user);
</script>

<template>
  <div class="flex flex-col items-center">
    <div class="absolute top-1/4 flex flex-col items-center">
      <p class="special-font text-7xl rounded-sm px-7 gradient-red">
        {{ user.username }}
      </p>
    </div>
  </div>
</template>

I found a weird workaround, but it’s counterintuitive (iterating through array of 1 element does the job)

<template>
  <div class="flex flex-col items-center">
    <div class="absolute top-1/4 flex flex-col items-center">
      <p
        class="special-font text-7xl rounded-sm px-7 gradient-red"
        v-for="user in user"
      >
        {{ user.username }}!
      </p>
    </div>
  </div>
</template>