Passing Reactive State using Vue 3 Props

Illustrate how to pass state as props in a Vue 3 application and ensure reactivity is maintained across child components.
<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

// This state is reactive and we will pass it to the child component
const parentState = ref('This is parent data');

  <ChildComponent :propState="parentState" />
This is the parent component where we define a reactive state using `ref` from Vue 3. We then pass this state to a ChildComponent through a prop called `propState`.
export default {
  props: {
    propState: String

    <!-- Use the reactive propState passed down from the parent component. -->
    <p>{{ propState }}</p>
This is the child component that receives the reactive state passed from the parent component as a prop called `propState`. It declares `propState` in its props option and then uses it within its template.