vue3 如何在 view 中使用子组件的变量？

制作了一个 demo https://sfc.vuejs.org/#eNpdUk...

App.vue

<script setup>
import { ref, computed } from 'vue'
import Hello from './Hello.vue';

const hello = ref(null)

const msg = ref('hello world')

function namef(){
  alert(hello.value.name)
}
  
</script>

<template>
  <Hello ref="hello"></Hello>
  <h1>{{ msg }}</h1>
  
  <h1>
    how to show hello.name here?
  </h1>
  
  <button @click="namef">
    namef
  </button>
</template>

Hello.vue

<template>
  component hello
</template>

<script setup>
  import { ref } from 'vue'
  const name = ref('the name')
  
  defineExpose({
    name
  })
</script>

如何才能在 App.vue 的 template 中显示 Hello.vue 的 name 值？