Working on a Vue 3 project, my setup includes a stuff.ts file with helpful functions that I need to utilize in my template.
<script lang="ts">
import { defineComponent, onMounted } from 'vue'
import { doSomething } from '@/helpers/stuff.ts'
export default defineComponent({
setup(){
onMounted(() => console.log(doSomething)) //<-- logs here okay
}
})
</script>
<template>
<!-- ERROR: doSomething is not a function -->
<a href="#do" @click="doSomething()">Do Something</a>
</template>
Upon inspection, the function seems properly imported and defined when logged in onMounted().
However, attempting to execute doSomething() from the template results in an error stating the function is undefined. Although still new to Vue 3, it appears that additional steps may be required to expose the function correctly.
How can I ensure an imported function is accessible within my template? Would utilizing a component method instead and invoking doSomething inside it be more effective?