如何在Vue 3中实现类似showHxSign()的功能

<template>
  <div>
    <button @click="showHxSign">Show Hx Sign</button>
    <teleport to="body">
      <HxSign ref="esign" />
    </teleport>
  </div>
</template>
<script>
import { ref, onMounted } from 'vue'
import HxSign from './HxSign.vue'

export default {
  components: {
    HxSign
  },
  setup() {
    const esignRef = ref(null)

    const showHxSign = () => {
      esignRef.value.show()
    }

    onMounted(() => {
      esignRef.value = esignRef.value.$refs.esign
    })

    return {
      showHxSign
    }
  }
}
</script>
<p>注意，上述示例中使用了<code>teleport</code>来将<code>HxSign</code>组件的内容传送到<code>body</code>元素下，以确保组件可以在页面的其他位置渲染。</p>