I'm using Nuxt version 2.15.7 and Vue 2.6.14. My understanding is that child components are mounted before the parent component is mounted, as explained in this answer.
However, in my project I'm experiencing the opposite:
Parent.vue
<template>
<div class="parent">
<MessageCard ref="messageCard"></MessageCard>
</div>
</template>
<script>
export default {
mounted() {
console.log("Parent Mounted");
console.log(this.$refs.messageCard); // undefined
}
}
</script>
MessageCard.vue
<template>
<div class="messageCard">Hello</div>
</template>
<script>
export default {
mounted() {
console.log("Child mounted");
}
}
</script>
The output on my console shows:
Parent mounted
undefined
Child mounted
According to the vue forum Shouldn't the child component be mounted before the parent? I need to call methods on the child, but it's undefined. I've even tried this.$nextTick(), only to find the same results. I understand the resources I linked to are from 2018 and 2017 respectively... has this behavior changed in the last 4 years?