vue.js 3 .value.click is not a function

Question

    <template>
            <RecyclablesPopup ref="LVP" class="inline-block m-5px"></RecyclablesPopup>
    </template>

    <script setup>
    import RecyclablesPopup from "../components/popups/RecyclablesPopup";
    import { ref } from 'vue';
    const LVP = ref(null);

    // ... after mounted I have an event with a legacy component and onclick handler:
    eventClick: function(calEvent)
        {
            console.log(LVP.value);
            LVP.value.click();
        }
    </script>

At the end I get Uncaught TypeError: LVP.value.click is not a function after I clicked.

console.log returns me the proxy object as expected Proxy { <target>: Proxy, <handler>: {…} }

Why can't I call click()?

Answer 1

the click function should be exposed by the child component in order be accessed by the parent component :

RecyclablesPopup component

<script setup>

function click(){
  //.......
}
defineExpose({
 click
})
</script>

for more details please check https://vuejs.org/guide/essentials/template-refs.html#ref-on-component