title: bootstrap vue toast disappears immediately
body: <p>I'm trying to display a message using toast. So I tried all example code on (<a href="https://getbootstrap.com/docs/5.1/components/toasts/" rel="nofollow noreferrer">https://getbootstrap.com/docs/5.1/components/toasts/</a>) here,<br />
  but when I click the button to show up toast, it showed once and disappear immediately.</p>
  <p>I tried <code>this.$bvToast.toast</code> to <code>this.$root.$bvToast.toast</code>
  and <code>import 'bootstrap-vue/dist/bootstrap-vue.css'</code></p>
  <p>but it doesn't work..</p>
  <p>here is my code</p>
  <pre><code>&lt;template&gt;
   &lt;div&gt;
      &lt;b-button @click=&quot;makeToast()&quot;&gt;Show Toast&lt;/b-button&gt;
      &lt;b-button @click=&quot;makeToast(true)&quot;&gt;Show Toast (appended)&lt;/b-button&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
    export default {
      data() {
        return {
          toastCount: 0
        }
      },
      methods: {
        makeToast(append = false) {
          this.toastCount++
          this.$bvToast.toast(`This is toast number ${this.toastCount}`, {
            title: 'BootstrapVue Toast',
            autoHideDelay: 5000,
          // 'no-auto-hide':true,
            appendToast: append
          })
        }
      }
    }
  &lt;/script&gt;
  </code></pre>
  <p>exactly same the example code..</p>
  <p>I'm using this version</p>
  <pre><code>&quot;vue&quot;: &quot;^2.6.14&quot;,
  &quot;bootstrap-vue&quot;: &quot;^2.21.2&quot;,
  </code></pre>
  <p>How can I fix this?? Help me..</p>