I have a main component and subcomponent set up as shown below:
Main Component :
<script setup>
import SubComp from '@/components/SubComp.vue'
import { ref, computed } from 'vue'
const subComp = ref(null)
const handleClick = () => {
console.log(subComp.value.selectedRadio) // <====== UNDEFINED
subComp.value.hello() // <======= RETURNS hello is not a function
};
</script>
<template>
<SubComp ref="subComp" />
<button @click="handleClick()" type="button">Click Me!</button>
</template>
Subcomponent :
<script setup>
import { ref } from 'vue'
const selectedRadio = ref("")
selectedRadio.value = "test"
const hello = () => {
console.log("hey from subcomponent");
};
defineExpose({
hello,
selectedRadio,
});
</script>
<template>
<div>
<h3>Hello! I am the subcomponent</h3>
</div>
</template>
When the button is clicked, the following errors are encountered:
console.log(subComp.value.selectedRadio) // <====== UNDEFINED
subComp.value.hello() // <======= RETURNS hello is not a function
The subcomponent correctly returns the component Object. Accessing subComp.value.$.exposed shows both the selectedRadio property and the hello function.
Vue version : 3.2.45
Could someone please assist with this issue?
Thank you!