title: Uncaught TypeError: Cannot read property '$bvModal' of undefined vue
body: <p>I'm guessing <code>this</code> isn't scoped properly in my function, when I try to call 
  <code>this.$bvModal.show("signinModal")</code> to show my modal I get this error:</p>
  
  <pre><code>Uncaught TypeError: Cannot read property '$bvModal' of undefined
  </code></pre>
  
  <p>I know that <code>$bvModal</code> should be scoped to the component and I'm not using any arrow functions so I don't see where my issue is coming from, is there a way to get around this in vue that I'm missing?</p>
  
  <pre><code>&lt;template&gt;
    &lt;div class="container"&gt;
  
      &lt;b-modal id="signinModal" @hidden="signinUser($event)" :no-close-on-backdrop="true"&gt;
        &lt;input id="email" v-model="email" placeholder="email"&gt;
        &lt;input id="pass" v-model="password" placeholder="password"&gt;
      &lt;/b-modal&gt;
  
      &lt;form v-on:submit.prevent class="cube" v-if="modalShow == false"&gt;
         &lt;div&gt;
           &lt;input id="title" v-model="title" placeholder="title"&gt;
         &lt;/div&gt;
  
         &lt;div&gt;
           &lt;textarea id="body" v-model="body" placeholder="body"&gt;&lt;/textarea&gt;
         &lt;/div&gt;
  
         &lt;div&gt;
           &lt;b-button id ="postbtn" @click="addpost($event)" variant="outline-success"&gt;Publish&lt;/b-button&gt;
         &lt;/div&gt;    
      &lt;/form&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  const {fb,db} = require('../../fireconfig.js')
  
  export default {
    name: 'AddPost',
    data:function(){   
      return{
          title: '',
          body: '',
          modalShow: true,
          email: '',
          password: ''
      }      
    },
    mounted(){
      this.$bvModal.show("signinModal")
    },
  
    methods:{
      signinUser:function(e){
        e.preventDefault()
        fb.auth()
          .signInWithEmailAndPassword(this.email, this.password)
          .catch(function(error) {
            // Handle Errors here.
            var errorCode = error.code;
            var errorMessage = error.message;
  
            if (errorCode === 'auth/wrong-password' || errorCode === 'auth/invalid-email') {
              alert('password or email incorrect',errorCode,errorMessage);
              this.$bvModal.show("signinModal") //---------------ERROR THROWN HERE
  
           } else {
              console.log('user successfully authenticated')
           }
        });
      },
  
      addpost(event){   
        event.preventDefault()
        try {
          let data = {
             title: this.title,
             body: this.body
          }
  
          db.collection('articles').doc(this.title).set(data)
          console.log('uploaded data to db')
        } catch(err) {
          console.log('there was an error',err)
        }
      },
    } 
  }
  &lt;/script&gt;
  
  </code></pre>