title: Vuejs: How to use `v-b-modal directive` in BootstrapVue?
body: <p>Here's my code (ERROR):</p>
  <pre><code>&lt;template lang=&quot;pug&quot;&gt;
    .component-root
      b-btn(v-b-modal.myModal)
        i.fa.fa-calendar
      b-modal#myModal
        span Hello this is my modal!
  &lt;/template&gt;
  </code></pre>
  <p>it outputs an error message:</p>
  <pre><code>[Vue warn]: Property or method &quot;v&quot; is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
  </code></pre>
  <p>When I use <code>$refs</code> method to create modal, it works :</p>
  <pre><code>&lt;template lang=&quot;pug&quot;&gt;
    b-button(@click=&quot;showModal&quot;)
      i.fa.fa-calendar
    b-modal(ref=&quot;myModalRef&quot; hide-footer title=&quot;some title&quot;)
      span Hello form my modal
  &lt;/template&gt;
  
  &lt;script&gt;
    ...
    methods: {
      showModal() {
        this.$refs.myModalRef.show();
      },
    }
    ...
  &lt;/script&gt;
  </code></pre>
  <p>Here's my main App.js with BootstrapVue installed</p>
  <pre><code>import 'bootstrap-vue/dist/bootstrap-vue.css';
  import 'font-awesome/css/font-awesome.min.css';
  
  import Vue from 'vue';
  import Moment from 'vue-moment';
  import BootstrapVue from 'bootstrap-vue';
  import DatePicker from 'vue2-datepicker';
  
  import './assets/bootstrap.cosmo.min.css';
  
  import App from './App';
  import router from './router';
  
  Vue.config.productionTip = false;
  Vue.use(BootstrapVue);
  Vue.use(Moment);
  Vue.use(DatePicker);
  
  /* eslint-disable no-new */
  new Vue({
    el: '#app',
    router,
    components: { App },
    template: '&lt;App/&gt;',
  });
  </code></pre>
  <p>I just following the manual here: <a href="https://bootstrap-vue.js.org/docs/components/modal/" rel="nofollow noreferrer">https://bootstrap-vue.js.org/docs/components/modal/</a>
  So far I have problem until I want to show some modal.</p>
  <p>What's wrong with me?</p>