I am trying to hide a bootstrap popup when the "Add Location" button is pressed and when the field is filled.

<template>
  <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">{{popupTitle}}</h5>
        <button type="button" @click="closeModal" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p><input type="text" v-model="addBinLocation"></p>
        <span v-show="errorTxt" class="error">Field cannot be empty</span>
      </div>
      <div class="modal-footer">
        <button @click="btnAdd" type="button" class="btn btn-primary">Add Location</button>
      </div>
    </div>
  </div>
</div>



</template>

<script>
export default {
    props:['popupTitle'],
    data(){
      return{
        addBinLocation: '',
        errorTxt: false,
      }
    },
    methods:{
      btnAdd(){
        if(this.addBinLocation === ''){
          this.errorTxt = true;
        }
        else{
          this.$emit('addLocation', this.addBinLocation);
          this.addBinLocation = ''
          this.errorTxt = false;
        }
    },
    closeModal(){
      this.addBinLocation = ''
      this.errorTxt = false;
    }
  }
}
</script>

<style scoped>
  .error{
    color:red
  }
</style>

in the btnAdd function else section, when the user has filled the field, I want the modal to close when the button is clicked. I tried refs, by giving the modal a ref and adding this code but it is not working

this.$refs.myModal.hide()