Vue single file component import lifecycle hooks - vue.js

Question

I need help with the setup of my Vue application (I am just learning vue).
I read in the tutorials that to get access to a lifecycle hook I would need to do something like this:
<template>
<h4>Sports</h4>
<li v-for="sport in sports" v-bind:key="sport.id">
{{ sport.name }}
</li>
</template>
<script lang="ts">
import { onMounted } from "vue";
export default {
setup() {
onMounted(() => {
console.log("component mounted");
});
},
data() {
return {
sports: [],
};
},
};
</script>
However, VSCode's intellisense doesn't recognize onMounted as an exported function from vue. When I run my code in snowpack it still doesn't recognize the function.

Answer 1

I think the issue is likely due to lang="ts"
You could try having the js in a separate file and referencing it with <script lang="ts" src="./myComponent.ts"> and then have the typescript in there.
Here is some documentation someone came up with regarding, what seems to be, the same/related issue.
https://github.com/patarapolw/vue-typescript-suggestions

Answer 2

You don't need to import them, they are already available:
<template>
<h4>Sports</h4>
<li v-for="sport in sports" v-bind:key="sport.id">
{{ sport.name }}
</li>
</template>
<script>
export default {
data() {
return {
sports: [],
};
},
mounted() {
console.log("component mounted");
};
};
</script>
Also, unless you specifically want to use typescript, then leave off lang="ts" in the script tag.