Version

3.2.4

Reproduction link

[https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHRlbXBsYXRlPlxuICA8aDE e3sgbXNnIH19PC9oMT5cbiAgPENvbXAgcmVmPVwiaXRcIj48L0NvbXA XG4gIDxidXR0b24gQGNsaWNrPVwib25DbGlja1wiPlxuICAgIGNsaWNrZWRcbiAgPC9idXR0b24 XG48L3RlbXBsYXRlPlxuXG48c2NyaXB0IHNldHVwPlxuICBpbXBvcnQgQ29tcCBmcm9tICcuL0NvbXAudnVlJ1xuICBpbXBvcnQge3JlZn0gZnJvbSAndnVlJ1xuY29uc3QgbXNnID0gJ0hlbGxvIFdvcmxkITM0NSdcbmNvbnN0IGl0PXJlZihudWxsKVxuY29uc3Qgb25DbGljaz0oKT0 e1xuICBpdC50ZXN0KClcbn1cbjwvc2NyaXB0PiIsIkNvbXAudnVlIjoiPHRlbXBsYXRlPlxuICA8aDE e3sgbXNnIH19PC9oMT5cbjwvdGVtcGxhdGU XG5cbjxzY3JpcHQgc2V0dXA XG5cdGNvbnN0IG1zZyA9ICdIZWxsbyBXb3JsZCExMTExMjM0J1xuICBjb25zdCB0ZXN0PSgpPT57XG4gICAgYWxlcnQoXCJoZWxsb1wiKVxuICB9XG48L3NjcmlwdD4ifQ==](https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHRlbXBsYXRlPlxuICA8aDE e3sgbXNnIH19PC9oMT5cbiAgPENvbXAgcmVmPVwiaXRcIj48L0NvbXA XG4gIDxidXR0b24gQGNsaWNrPVwib25DbGlja1wiPlxuICAgIGNsaWNrZWRcbiAgPC9idXR0b24 XG48L3RlbXBsYXRlPlxuXG48c2NyaXB0IHNldHVwPlxuICBpbXBvcnQgQ29tcCBmcm9tICcuL0NvbXAudnVlJ1xuICBpbXBvcnQge3JlZn0gZnJvbSAndnVlJ1xuY29uc3QgbXNnID0gJ0hlbGxvIFdvcmxkITM0NSdcbmNvbnN0IGl0PXJlZihudWxsKVxuY29uc3Qgb25DbGljaz0oKT0 e1xuICBpdC50ZXN0KClcbn1cbjwvc2NyaXB0PiIsIkNvbXAudnVlIjoiPHRlbXBsYXRlPlxuICA8aDE e3sgbXNnIH19PC9oMT5cbjwvdGVtcGxhdGU XG5cbjxzY3JpcHQgc2V0dXA XG5cdGNvbnN0IG1zZyA9ICdIZWxsbyBXb3JsZCExMTExMjM0J1xuICBjb25zdCB0ZXN0PSgpPT57XG4gICAgYWxlcnQoXCJoZWxsb1wiKVxuICB9XG48L3NjcmlwdD4ifQ==)

Steps to reproduce

I create a button that has a logger method , it write under <script setup lang=''ts'>. I also create a component using that button.

<template>
  <button class="btn" @click="onClick">{{ label }}</button>
  this is new value
  <div>{{ foo }}</div>
</template>

<script setup lang="ts">
import { ref, defineProps, defineEmits } from 'vue'
const props = defineProps({
  foo: String
})

const emit = defineEmits(['change', 'delete'])
const label = ref("I'm a very dangerous button")
const onClick = () => {
  label.value = "Don't touch me"
  console.log(control.getBooksRoute())
  emit('change')
}
const log = () => {
  console.log('hello ')
}
</script>

parent component is

<template>
  <div class="about">
    <h1>This is an about page</h1>
  </div>
  <my-button ref="button" foo="hello"></my-button>
  <button @click="onclicked">clicked child</button>
</template>

<script setup lang="ts">
import MyButton from '@/components/MyButton.vue'

import { ref } from 'vue'

const button = ref(null)

const onclicked = () => {
  button.value.log()
}

</script>

What is expected?

i call child method from parent , I expect I can call child method.

What is actually happening?

Uncaught TypeError: button.value.log is not a function