<h1 id="heading-introduction">Introduction</h1>
<p>Ideally - we want our components to be kinda "dumb". Mostly just displaying data or gathering input from the user - the front end components shouldn't be smart enough to know what to do with said info once they have it. </p>
<p>Usually this means we need to tell another portion of the app to handle more complex stuff. Be it Vuex to handle connecting to our API or to manage our data state that is read by other "dumb" components.</p>
<p>Today I learned a new thing, and that is how to listen to a child component's <code>mounted</code> lifecycle method before doing something. </p>
<h1 id="heading-the-code">The Code</h1>
<pre><code class="lang-js">&lt;CustomComponentName @hook:mounted=<span class="hljs-string">"onChildComponentMount()"</span>/&gt;
</code></pre>
<pre><code class="lang-js">methods: {
  onChildComponentMount() {
    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'CustomComponentName mounted!'</span>);
  }
}
</code></pre>
<h1 id="heading-conclusion">Conclusion</h1>
<p>My take away today is this:</p>
<blockquote>
<p>If it feels harder than it should be - you're probably doing it wrong.</p>
</blockquote>
<p>Is this new to you too? Let me know in the comments!</p>


# Introduction
Ideally - we want our components to be kinda "dumb". Mostly just displaying data or gathering input from the user - the front end components shouldn't be smart enough to know what to do with said info once they have it. 

Usually this means we need to tell another portion of the app to handle more complex stuff. Be it Vuex to handle connecting to our API or to manage our data state that is read by other "dumb" components.

Today I learned a new thing, and that is how to listen to a child component's `mounted` lifecycle method before doing something. 

# The Code
```js
<CustomComponentName @hook:mounted="onChildComponentMount()"/>
```

```js
methods: {
  onChildComponentMount() {
    console.log('CustomComponentName mounted!');
  }
}
```

# Conclusion
My take away today is this:
> If it feels harder than it should be - you're probably doing it wrong.

Is this new to you too? Let me know in the comments!

Vue.js Wait for a Child Component to Mount

Table of contents

Introduction

The Code

Conclusion