From the article "Building a Quiz App with Nuxt and Xata"

index-2.vue

<script setup>
useSeoMeta({
  …
});

const questionsAnswered = useState("questionsAnswered", () => 0);
const totalCorrect = useState("totalCorrect", () => 0);

const { data: questions } = await useFetch(`/api/questions`);
const { data: answers } = await useFetch(`/api/answers`);

const numQuestions = questions.value.length

const results = [
  …,
{
    min: numQuestions,
    max: numQuestions,
    title: "Wow, you're a genius!",
    desc: "Studying has definitely paid off for you!",
  },
];
</script>

<template>
  <main>
    <div class="ctr">
      <Questions
        v-if="questionsAnswered < questions.length"
        :questions="questions"
        :answers="answers" />
      <Result v-else />
      <button type="button" class="reset-btn">Reset</button>
    </div>
    <Footer />
  </main>
</template>