title: Bootstrap-vue dynamic toast isn't working
body: <p>I am trying to use dynamic toast from bootstrap-vue. Here what I am trying to do:</p>
  <pre><code>&lt;template&gt;
   &lt;b-button @click=&quot;handleClick(education)&quot;&gt;&lt;/b-button&gt;
  &lt;/template&gt;
  </code></pre>
  <pre><code>&lt;script&gt;
  import { notificationToast } from &quot;@/components/NotificationToast&quot;;
  
  export default{
   methods:{
    handleClick(){
     notificationToast(true);
   }
  }
  &lt;/script&gt;
  </code></pre>
  <p><strong>NotificationToast.js</strong></p>
  <pre><code>import Vue from &quot;vue&quot;;
  import { BVToastPlugin } from &quot;bootstrap-vue&quot;;
  
  Vue.use(BVToastPlugin);
  
  let notificationToast = (append = false) =&gt; {
    this.$bvToast.toast(`This is toast`, {
      title: &quot;BootstrapVue Toast&quot;,
      autoHideDelay: 5000,
      appendToast: append,
    });
  };
  
  export { notificationToast };
  </code></pre>
  <p>Whenever I click on the button it show the error :</p>
  <p><em>TypeError: Cannot read property '$bvToast' of undefined</em></p>
  <p>As it is mentioned in the <a href="https://bootstrap-vue.org/docs/components/toast#toasts-on-demand" rel="nofollow noreferrer">doc</a>, I imported BVToastPlugin, still the problem is occurring. What to do? Thanks in advance.</p>