Vueのmountedってどんな順で呼ばれるんだ？

子要素を含む要素をVueを使ってレンダリングしたときに、
mountedイベントはどんな順で発火するのか気になった。

ちょっと確認してみた。
（こんな適当なコードでよかったのかは、謎）

<div id="app"></div>

Vue.component('child1', {
  template: 
  '<p>child1</p>',
  mounted: function() {
    console.log('child1 - mounted!')
  }
});

Vue.component('child2', {
  template: 
  '<p>child2</p>',
  mounted: function() {
    console.log('child2 - mounted!')
  }
});

var app = new Vue({
  el: '#app',
  template: 
  '<div><child1 /><p>app</p><child2/></div>',
  mounted: function() {
    console.log('app - mounted!')
  }
});

結果↓

"child1 - mounted!"
"child2 - mounted!"
"app - mounted!"

子供⇒親かぁ。まぁそりゃそうか。
メモ記事です。