title: Call parent method from nested child in Vue
body: <p>I scaffolded a project from <code>vue-cli</code> using the <code>webpack</code> template.</p>
  
  <p>Now in the <code>App</code> component I created a bootstrap modal dialog, which I want to reuse from the entire application. Along with that I also created one method in the <code>App</code> component called <code>showMessage</code> which actually does the work of showing the modal.</p>
  
  <p>Now considering that I should be able to reach that method from any component, is calling like what is shown below a bad idea?</p>
  
  <pre><code>this.$root.$children[0].showMessage('Message', `An email will be sent to ${this.form.email}`)
  </code></pre>