For those willing to save their fingers:

Comment this out on src/assets/main.css:

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

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

Comment these lines out on src/App.vue:

// import HelloWorld from './components/HelloWorld.vue'

<!-- <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" /> -->

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

/* nav { */
/*   width: 100%; */
/*   font-size: 12px; */
/*   text-align: center; */
/*   margin-top: 2rem; */
/* } */

src/components/Quiz/QuizQuestion.vue:

<script setup>
</script>
<template>
  <textarea style="width: 100%; height: 300px; background-color: #d9d9d9;"
    >Quiz Question
  </textarea>
</template>

src/components/Quiz/QuizHeader.vue:

<script setup>
</script>
<template>
 <header>
  <h1>Quiz Header</h1>
   <p>Welcome to your first quiz. How do you think you'll do?</p>
 </header>
</template>

src/views/HomeView.vue

<script setup>
import Quiz from "@/components/Quiz/QuiZ.vue";
</script>
<template>
  <main>
    <Quiz :quiz="{ name: 'My First Quiz', questions: []}" />
  </main>
</template>

src/components/Quiz/QuiZ.vue

(in the latest version, there's a warning that the filename should be multiword,

so, QuiZ.vue is acceptable)

<script setup>
import QuizHeader from "@/components/Quiz/QuizHeader.vue";
import QuizQuestion from "@/components/Quiz/QuizQuestion.vue";
import QuizFooter from "@/components/Quiz/QuizFooter.vue";
// import { provide, ref } from "vue";
defineProps({ quiz: Object });
// let props = defineProps({ quiz: Object });
// let name = ref('John Doe');
// provide('name', {
//   name,
//   changeName: () => name.value = 'Changed'
// });
// provide('name', name);
// provide('key', 'value');
// provide('quiz', props.quiz);
</script>

<template>
  <!-- <h1>{{ name }}</h1> -->
  <QuizHeader />
  <QuizQuestion />
  <QuizFooter :quiz="quiz"/>
</template>

src/components/Quiz/QuizFooter.vue

<script setup>
// import { inject } from "vue";
import QuizFooterLinks from "@/components/Quiz/QuizFooterLinks.vue";
// let quiz = inject('quiz');
defineProps({
 quiz: Object
});
</script>

<template>
<footer>
  <h4>Quiz Footer</h4>
  <QuizFooterLinks :quiz="quiz" />
</footer>
</template>

src/components/Quiz/QuizFooterLinks.vue

<script setup>
// import { inject } from "vue";
defineProps({ quiz: Object });
// let {name, changeName } = inject('name');
// setTimeout(() => {
//   name.value = 'A New Name';
// }, 3000);
// let quiz = inject('quiz');
// let name = inject('name');
</script>

<template>
  <div>
    <h5>{{ quiz.name }}</h5>
    <!-- <button @click="changeName">{{ name }}</button> -->
    <ul>
      <li><a href="#">Get a Job</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>
  </div>
</template>

Dependency Injection With Provide and Inject