vuejs bootstrap modal component code example

Example: boostrap vue open modal in child component

Parent.vue 
<template>
	<button @click="openModal()">Open Child Component</button>
    <child-component-with-modal ref="childComponent">
    </child-component-with-modal>
</template>
<script>

export default {
	data() {..}
    methods: {
    	openModal(){
        	//access the childComponent via ref
            //access its children and use the correct index for
            //your targeted boostrap vue modal
            //use the show property which is the boostrap show method
        	
            this.$refs.childComponent.$children[0].show();
            
            //sometimes it helps to console log the ref to see all
            //available properties of ref element and its children
            
            console.log(this.$refs.childComponent);
        }
    }
}
</script>

Single File Component Child.vue
<template>
	<div>
    	...
    </div>	
	<b-modal @ok="confirmed()" @cancel="canceled()" @close="canceled()">
	</b-modal>
</template>
<script>

export default {
	data() {..}
    methods: {...}
}
</script>