How can I reassign and repass props data with keeping its reactivity?

Question

<template>
  <p>
    <input type="text" v-model="appInput">
    {{ appInput }}
  </p>
  <ParentComponent :appInput='appInput' :appObject='appObject'/>
</template>

<script setup>

import ParentComponent from './components/ParentComponent.vue'
import { ref } from 'vue'

const appInput = ref('')
const appObject = ref({
  text1: 'text1',
  text2: 'text2'
})

</script>

<!-- ------------------------------------- -->

<template>

  <!-- {{ appInput }} -->
  {{ props.appInput }}
  <!-- {{ appObject }} -->
  {{ props.appObject.text1 }}

<ChildComponentVue :appInput='appInput'/>

</template>

<script setup>

import { defineProps } from 'vue';
import ChildComponentVue from './ChildComponent.vue';

const props = defineProps(['appInput', 'appObject'])

// const appInput = props.appInput
// const appObject = props.appObject

</script>

Using Vue 3, I want to reactively render text from App.vue on ParentComponent.vue and ChildComponent.vue by passing data from App to Parent, and Parent to child successively.

But when I reassign props data on ParentComponent for use it conveniently, it lose reactivity.

I tried repack it with ref() on ParentComponent, but as Vue3 Official Document says, it doesn't work.

But it is too dirty to use passed data without reassign in template (like {{ props.appObject.text1 }}) and too hard to repass not entire but just some part of passed data.

and here are my questions

1. Are there some ways to use and repass passed data more concisely without losing its reactivity?

2. What is the convension on Vue3 to deal with this kind of problem happen. Just using Vuex?