求教 vue3 下路由传参给子组件后，子组件列表如何能实时渲染

描述：

想在 message.vue 中点击 button 按钮后向子组件的数组中传入一个值，然后在子组件 detail.vue 的页面中能够实时的渲染显示。
知道肯定要向 detail.vue 中的 messageList 数组中 push 传入的参数，但是不知道具体怎么写，特来求教，先行谢过。

// message.vue
<template>
  <li v-for="m in messageList" :key="m.id">
    <router-link
      :to="{ name: 'Detail', query: { id: m.id, title: m.title } }"
      >{{ m.title }}</router-link
    >
    <button @click="pushShow(m)">push 查看</button>
  </li>
  <hr />
  <router-view></router-view>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { useRoute, useRouter } from "vue-router";
let messageList = [
  { id: "004", title: "message004" },
  { id: "005", title: "message005" },
  { id: "006", title: "message006" },
];

const router = useRouter();

const pushShow = (m: { id: string; title: string }) => {
  router.push({ name: "Detail", query: { id: m.id, title: m.title } });
};
</script>

<style scoped lang="less"></style>

// detail.vue
<template>
  <li v-for="m in messageList" :key="m.id">
    {{ m.title }}
  </li>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { useRoute } from "vue-router";

let messageList = reactive([
  { id: "001", title: "message001" },
  { id: "002", title: "message002" },
  { id: "003", title: "message003" },
]);

const route = useRoute();
</script>

<style scoped lang="less"></style>