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');
</script>

<template>
  <ChildComponent :propState="parentState" />
</template>

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`.

<script>
export default {
  props: {
    propState: String
  }
};
</script>

<template>
  <div>
    <!-- Use the reactive propState passed down from the parent component. -->
    <p>{{ propState }}</p>
  </div>
</template>

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.