title: Bootstrap modal not being rendered (Vue)
body: <p>I'm trying to open a simple modal using bootstrap-vue, but it's not showing up on the screen. However, it is in the HTML code.</p>
  <p>App.vue:</p>
  <pre><code>&lt;template&gt; 
    &lt;div&gt;
        &lt;b-button id=&quot;show-btn&quot; v-b-modal.my-modal&gt;Open Modal&lt;/b-button&gt;
        &lt;b-modal id=&quot;my-modal&quot;  title=&quot;Using Component Methods&quot;&gt;
          &lt;div class=&quot;d-block text-center&quot;&gt;
            &lt;h3&gt;Hello From My Modal!&lt;/h3&gt;
          &lt;/div&gt;
          &lt;b-button class=&quot;mt-3&quot; variant=&quot;outline-danger&quot; block @click=&quot;hideModal&quot;&gt;Close Me&lt;/b-button&gt;
          &lt;b-button class=&quot;mt-2&quot; variant=&quot;outline-warning&quot; block @click=&quot;toggleModal&quot;&gt;Toggle Me&lt;/b-button&gt;
        &lt;/b-modal&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  <p>Main.js:</p>
  <pre><code>import Vue from 'vue'
  import App from './App.vue'
  import router from './router'
  import store from './store'
  import Axios from 'axios'
  import axios from 'axios'
  import 'bootstrap/dist/css/bootstrap.min.css';
  import 'bootstrap-vue/dist/bootstrap-vue.min.css';
  import {BootstrapVue, IconsPlugin} from 'bootstrap-vue';
  
  Vue.config.productionTip = false
  
  Vue.prototype.$http = Axios;
  
  Vue.config.productionTip = false
  
  Vue.use(BootstrapVue);
  Vue.use(IconsPlugin);
  
  new Vue({
    router,
    store,
    render: h =&gt; h(App)
  }).$mount('#app')
  
  
  export default axios;
  
  </code></pre>
  <p>Result:</p>
  <p><a href="https://i.stack.imgur.com/ayJ1g.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ayJ1g.jpg" alt="enter image description here" /></a></p>
  <p>I've already tried using the reference strategy, adding a <code>ref</code> attribute to the modal, but it didn't work either.</p>