I am struggling with a simple Vue 3 component that closely resembles some examples in the documentation. Here is the code:
// Typewriter.vue
<template>
<div id="wrapper">
<p>{{ text }}</p>
</div>
</template>
<script>
export default {
name: "typewriter",
props: {
phrase: {
type: String,
required: true,
},
},
data() {
return {
text: "",
};
},
mounted() {
console.log('Hello World!');
}
};
</script>
<style scoped></style>
When I try to render this in another component using the following:
<template>
<p>Blah</p>
<typewriter phrase="some text" />
</template>
<script>
import Typewriter from "@/components/Typewriter.vue";
export default {
name: "bio",
components: {
Typewriter
}
};
</script>
<style scoped></style>
The issue is that mounted() doesn't seem to be getting called. If I switch it to setup(), then everything inside the method works but I lose access to this in the component, which is necessary for my case.
Is there something obvious that I'm missing? I'm new to Vue and still learning.