vue中父组件通过props向子组件传递数据但子组件接收不到解决办法

//父组件
<template>
  <div>
    <HelloWorld :message="message"></HelloWorld>
  </div>
</template>

<script setup>
import HelloWorld from "./components/HelloWorld.vue";
import { onMounted, ref } from "vue";
const message = ref("1");
onMounted(() => {
//模拟异步请求
   setTimeout(() => {
    message.value = "1312";
  }, 0);
});
</script>
<style scoped></style>

//子组件
<template>
  <div>{{message}}</div>
</template>

<script setup>
import { onMounted, defineProps } from "vue";
const props = defineProps(["message"]);
onMounted(() => {
  console.log("传递过来的数据", props.message);
});
</script>

<style scoped></style>

//父组件
<template>
  <div>
    <HelloWorld :message="message" v-if="isShow"></HelloWorld>
  </div>
</template>

<script setup>
import HelloWorld from "./components/HelloWorld.vue";
import { onMounted, ref } from "vue";
const message = ref("1");
const isShow=ref(false);
onMounted(() => {
//模拟异步请求
   setTimeout(() => {
    message.value = "1312";
    isShow.value=true;//获取数据成功，再让子组件渲染
  }, 0);
});

</script>

<style scoped></style>

//子组件
<template>
  <div>{{message}}</div>
</template>

<script setup>
import { defineProps,watch} from "vue";
const props = defineProps(["message"]);
//监听传过来的数据
watch(()=>props.message,()=>{
 console.log("传递过来的数据", props.message);
})
</script>
<style scoped></style>