Vue.js open modal by click of a button

According to your snippet, you're using a classic Bootstrap modal. You just need to use data-toggle and data-target attributes in that case:

<div id="app">
  <div class="container">
    <button class="btn btn-info" data-toggle="modal" data-target="#exampleModal">show modal</button>
    <example-modal></example-modal>
  </div>
</div>

---

Edit

I misread the question so i edit my answer.

It's possible to open the modal with a custom method. You just need to find the element "#exampleModal" by using refs and then open the modal with a bootstrap method (Bootstrap Programmatic API)

<div id="app">
  <div class="container">
    <button class="btn btn-info" @click="showModal">show modal</button>
    <example-modal ref="modal"></example-modal>
  </div>
</div>

methods: {
  showModal() {
    let element = this.$refs.modal.$el
    $(element).modal('show')
  }
}

Fiddle example

Without jQuery you could create a function on "method:" block like this:

openEditModal(data){
  // <handle with your data>
  this.$root.$emit("bv::show::modal", "your-modal-id");
}