Estoy tratando de acceder al método secundario en el componente principal utilizando el método vue3 y ref. Pero devuelve un error.

TypeError no detectado: addNewPaper.value?.savePaper no es una función

A continuación se muestra mi código. Por favor guíame donde estoy equivocado.

Componente hijo

 <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>

Componente principal

 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>

¡Cualquier solución apreciada!