title: How can I open a modal in VueJS using bootstrap?
body: <p>I am trying to open a modal in my Vue Template using boostrap. but whenever I try using jquery on it, modal is not appearing.</p>
  <p>Here is my code:</p>
  <pre><code>&lt;template&gt;
    &lt;div id=&quot;app_religion&quot;&gt;
      &lt;!-- Button trigger modal --&gt;
      &lt;!-- &lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot; data-toggle=&quot;modal&quot; data-target=&quot;#exampleModal&quot;&gt;Open&lt;/button&gt; --&gt;
      &lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot;  @click=&quot;showModal()&quot;&gt;
        Open
      &lt;/button&gt;
  
      &lt;!-- Modal --&gt;
      &lt;div class=&quot;modal fade&quot; id=&quot;exampleModal&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot; aria-labelledby=&quot;exampleModalLabel&quot; aria-hidden=&quot;true&quot;&gt;
        &lt;div class=&quot;modal-dialog&quot; role=&quot;document&quot;&gt;
          &lt;div class=&quot;modal-content&quot;&gt;
            &lt;div class=&quot;modal-header&quot;&gt;
              &lt;h5 class=&quot;modal-title&quot; id=&quot;exampleModalLabel&quot;&gt;Modal title&lt;/h5&gt;
              &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot; aria-label=&quot;Close&quot;&gt;
                &lt;span aria-hidden=&quot;true&quot;&gt;&amp;times;&lt;/span&gt;
              &lt;/button&gt;
            &lt;/div&gt;
            &lt;div class=&quot;modal-body&quot;&gt;
              test
            &lt;/div&gt;
            &lt;div class=&quot;modal-footer&quot;&gt;
              &lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot; data-dismiss=&quot;modal&quot;&gt;Close&lt;/button&gt;
              &lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot;&gt;Save changes&lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/template&gt;
  
  &lt;script&gt;
  
  export default {
      methods: {
          showModal() {
            console.log(&quot;test&quot;)
            $('#exampleModal').modal('show');
          },
      },
  }
  &lt;/script&gt;
  </code></pre>
  <p>I am really new in using Vue, can anyone guide me on how to solve my problem. I am really lost on trying to figure it out.</p>