[Vuejs]-Bootsrap modal not showing vue 3

You could use a ref and v-model to do it:

<template>
  <b-button @click="modalShow = true">open</b-button>
      
  <b-modal v-model="modalShow">
    <div class="d-block">Hello From My Modal!</div>
  </b-modal>
</template>
    

export default {
    data() {
        return {
            modalShow: false
        }
    }
}

EDIT: or with open function:

<template>
  <b-button @click="open()">open</b-button>
      
  <b-modal v-model="modalShow">
    <div class="d-block">Hello From My Modal!</div>
  </b-modal>
</template>
    

export default {
    data() {
        return {
            modalShow: false
        }
    },
    methods: {
        open(){
             this.modalShow = true;
        }
    }
}

EDITEDIT: or with toggle function

<template>
  <b-button @click="toggle()">{{modalShow ? "close" : "open"}}</b-button>
      
  <b-modal v-model="modalShow">
    <div class="d-block">Hello From My Modal!</div>
  </b-modal>
</template>
    

export default {
    data() {
        return {
            modalShow: false
        }
    },
    methods: {
        toggle(){
             this.modalShow = !this.modalShow;
        }
    }
}

or with own close Button inside modal:

<template>
  <b-button @click="open()">open</b-button>
      
  <b-modal v-model="modalShow">
    <div class="d-block">Hello From My Modal!</div>
    <button class="btn btn-danger" data-bs-dismiss="modal" @click="close()">close</button>
  </b-modal>
</template>
    

export default {
    data() {
        return {
            modalShow: false
        }
    },
    methods: {
        open(){
             this.modalShow = true;
        },
        close(){
          // do something on close
        }
    }
}