@S_W This is what I could get from this and previous episodes:

HomeView.vue

<script setup>
import Quiz from '@/components/Quiz/Quiz.vue'
</script>

<template>
  <main>
    <Quiz />
  </main>
</template>

Quiz.vue

<script setup>
import QuizHeader from '@/components/Quiz/QuizHeader.vue'
import QuizQuestion from '@/components/Quiz/QuizQuestion.vue'
import QuizFooter from '@/components/Quiz/QuizFooter.vue'
</script>

<template>
    <QuizHeader />

    <QuizQuestion />

    <QuizFooter />
</template>

QuizHeader.vue

<script setup>
import { state } from '@/stores/quizStore.js'
</script>

<template>
    <header>
        <h1>{{ state.name }}</h1>
        <p>Welcome to your first quiz. How do you think you'll do?</p>
    </header>
</template>

QuizFooter.vue

<script setup>
import QuizFooterLinks from '@/components/Quiz/QuizFooterLinks.vue'
</script>

<template>
    <footer>
        <h4>Quiz Footer</h4>

        <QuizFooterLinks />
    </footer>
</template>

QuizFooterLinks.vue

<script setup>
import { state } from '@/stores/quizStore.js'
</script>

<template>
    <div>
        <h5>{{ state.name }}</h5>

        <button @click="state.name = 'A New Quiz Name'">Change Quiz Name</button>

        <ul>
            <li><a href="#">Get a job</a></li>
            <li><a href="#">Contact us</a></li>
        </ul>
    </div>
</template>

And for the next files, I have guessed 😋

QuizQuestion.vue

<script setup>
import { ref } from 'vue'

const answer = ref('Quiz question')
</script>
<template>
    <div style="margin-top: 5rem;">
      <form>
        <textarea :placeholder="answer" style="width: 100%; height: 300px;" disabled />
      </form>
    </div>
</template>

In App.vue I removed:

      <HelloWorld msg="You did it!" />

@media (min-width: 1024px) {
  header {
    padding-right: calc(var(--section-gap) / 2);
  }
}

And added:

header {
  margin-bottom: 2rem;
}

nav {
  border-bottom: .1rem solid #666;
}
@media (min-width: 1024px) {
  header .wrapper {
    width: 100%;
  }
}

And in main.css I removed all this:

@media (min-width: 1024px) {
  body {
    display: flex;
    place-items: center;
  }

  #app {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 0 2rem;
  }
}

I could see he has some more files, but are not used in what he has shown.

Store State in an External File