[id].vue

<template>
  <div class="flex justify-center items-center h-screen flex-col">
    id: {{ $route.params.id }}
    
    <!-- Configuracoes {{ configuracoes }} -->
    aqui: {{ data }}
  </div>
</template>
<script setup>
import { useTokenStore } from "~/store/token";

const route = useRoute();

const tokenStore = useTokenStore();

const { data, pending, refresh, error } = await useFetch(
  "http://localhost:8181/evento/" + route.params.id,
  {
    headers: { Authorization: `Bearer ${tokenStore.token.token}` },
  }
);
console.log(data.value);
// const evento = reactive(data.value);
const nome = ref("");
const categorias = reactive([]);
const configuracoes = reactive({
  duracao: 5,
  classificados: 2,
  cores: [],
  inicio: null,
});
async function salvar() {
  var novoEvento = {
    nome: nome.value,
    configuracaoEvento: configuracoes,
    categorias: categorias,
  };
  try {
    retorno = await $fetch("http://localhost:8181/evento/", {
      headers: {
        Authorization: `Bearer ${tokenStore.token.token}`,
        "Content-Type": "application/json",
      },
      method: "POST",
      body: novoEvento,
    });
  } catch (e) {
    debugger;
  }
}
function teste() {
  refresh();
}
</script>

index.vue

<template>
  <div class="overflow-x-auto relative shadow-md sm:rounded-lg">
    <table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
      <thead
        class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400"
      >
        <tr>
          <th scope="col" class="py-3 px-6">Nome</th>
          <th scope="col" class="py-3 px-6">Inicio</th>
          <th scope="col" class="py-3 px-6">Atletas bateria</th>
          <th scope="col" class="py-3 px-6">
            <span class="sr-only">Edit</span>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr
          v-for="evento in data"
          :key="evento.id"
          class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600"
        >
          <th
            scope="row"
            class="py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white"
          >
            {{ evento.nome }}
          </th>
          <td class="py-4 px-6">{{ evento.configuracao.inicio }}</td>
          <td class="py-4 px-6">
            {{ evento.configuracao.participantesBateria }}
          </td>
          <td class="py-4 px-6 text-right">
            <NuxtLink
              :to="'/adm/evento/' + evento.id"
              class="font-medium text-blue-600 dark:text-blue-500 hover:underline"
              >Editar</NuxtLink
            >
          </td>
        </tr>
      </tbody>
    </table>
    <NuxtLink to="/adm/evento">
      <button
        type="button"
        class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800"
      >
        Novo evento
      </button>
    </NuxtLink>
  </div>
</template>

<script setup>
import { useTokenStore } from "~/store/token";

const tokenStore = useTokenStore();

const { data, refresh } = await useFetch("http://localhost:8181/evento/", {
  headers: { Authorization: `Bearer ${tokenStore.token.token}` },
});
</script>

<style></style>