How can i access child component method in parent component using ref in Vue3?

Question

I am trying to access the child method in the parent component using vue3 and ref method. But it returns an error.

Uncaught TypeError: addNewPaper.value?.savePaper is not a function

Below is my code. Please guide me where i am wrong.

Child component

<script setup lang="ts">
import { useWindowScroll } from '@vueuse/core'
import { Notyf } from 'notyf'
import { computed, defineProps, reactive, ref } from 'vue'
import { papers } from '/@src/firebase/connections'

const companySize = ref('')
const businessType = ref('')
const productToDemo = ref('')
const date = ref(new Date())

const { y } = useWindowScroll()

const isStuck = computed(() => {
  return y.value > 30
})

const initialState = reactive({
  subject: '',
  paper: '',
  marks: '',
})

const notyf = new Notyf()

const props = defineProps({
  subjects: { required: true },
})

const savePaper = () => {
  papers
    .add(initialState)
    .then(() => {
      notyf.success('Paper saved successfully')
    })
    .catch((err) => {
      notyf.error('Something went wrong')
    })
}
</script>

Parent component

const addNewPaper = ref()


const successSave = () => {
  addNewPaper.value?.savePaper()
  notyf.success('Your paper has been successfully created!')
}

 <template #content>
   <FormAddNewTopical ref="addNewPaper" :subjects="_subjects"></FormAddNewTopical>
 </template>

Any solution appreciated!

Answer 1

Public members are supposed to be defined with defineExpose with script setup syntax:

defineExpose({ savePaper })

Or with ctx.expose in setup function:

setup(props, ctx) {
  ...
  ctx.expose({ savePaper })
  ...