Vueコンポーネント外部からコンポーネントのメソッドを実行したい

Question

モーダルダイアログの内容をAjax処理で表示しようとしています。
AjaxでJSONデータを受け取った後のHTMLの組み立てはVueで行おうと思います。

ダイアログ自体はBootstrapの物をそのまま使うとして、ダイアログの内容だけをVueコンポーネント化しました。

<div class="modal" id="exampleModal">
  <div class="modal-dialog">
    <!-- ここにVueコンポーネントを読み込みます -->
    <image-browser></image-browser>
  </div>
</div>

<button id="btnModal">Show Modal</button>

<script>
$('#btnModal').on('click', function(){
	$('#exampleModal').modal();
});
</script>

表示そのものはうまくいくのですが、２回目以降にモーダルダイアログを開いた際、前回開いたときの状態がそのままになっているため、ダイアログを開くたび（閉じるたび？）に初期化して常に最初のページが表示されるようにしたいと思います。
初期化用のメソッドはVueコンポーネント側に持たせるとしてVueコンポーネントの外(素のHTML側)からそのメソッドを実行する方法はあるのでしょうか？

Vue自体不慣れなため、根本的に方法がおかしいなどのご意見もいただけるとありがたいです。

なお、Vue関連のスクリプトはBabelでES5向けにトランスパイルしています。よろしくお願いいたします。

Answer 1

次のサンプルのようになるでしょう。
サンプル実装

newしたvueのインスタンスを外から触ることができます。
なので、メソッドも呼べます。
jQueryからVueを操作するのは、あまり筋が良いとは言えないのでオススメはそんなにしませんが、まあ柔軟にやれてしまうのもVueの良いとこなので、参考にしてみてください

Answer 2

初めての答えです。
modalの開閉ならメソッドを実行より変数を伝達した方がやりやすいと思うけど、
これこそVueの魅力かな

##pencodeで説明すると
https://codepen.io/toyjack/pen/OZPzjv?editors=1010

##Vueの説明書なら、こちら
条件付きレンダリング

###app.vue 親

<template>
  <div>
    <button @click="toggleModal=!toggleModal">Show Modal</button>
    <modal v-if="toggleModal"></modal>
  </div>

</template>

<script>
import modal from './modal'
export default {
  name:'parent',
  components:['modal']
  data:function(){
    return {
      toggleModal:false
    }
  }
}
</script>

###modal.vue　子

<template>
  <div class="modal" id="exampleModal">
    <div class="modal-dialog">
      <!-- ここにVueコンポーネントを読み込みます -->
      <image-browser></image-browser>
    </div>
  </div>
</template>

ご参考までに

##追伸
どうしても子コンポネントのメソッドを呼びたいなら
apiのrefでも可能ですが、
stack overflowにもほかの方の答えがある
https://stackoverflow.com/questions/33682651/call-a-vue-js-component-method-from-outside-the-component