How to render a modal that is inside a component from another component in vueJs and Bootstrap - vue.js

Question

I have a modal inside a Vue component. Now, from another component i want to show that modal(component) when an event happens(click in a button).
This is the code of the component(modal)
This is the component where i want to get the modal
Code of the component with the modal
<template>
<div class="modal fade" id="exampleModal" tabindex="" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modificar Registro Documento</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="false">×</span>
</button>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button data-dismiss="modal" (click)="modificarRegistro()" type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</template>
<script lang="ts" scoped>
export default {
name : "Modal"
}
</script>
<style lang="sass" scoped>
</style>
This is the code of the component where i want to get the modal
<template>
<div id="contenedor">
<div id="padre">
<div id="barra">
<Modal/>
<div v-if="producto === 'bebidas'" class="tabcontent">
<div>
<button v-on:click="modal()" data-toggle="modal" data-target="#exampleModal">
<h6>Inka Kola</h6>
<img src="../../assets/incakolaPersonal.jpg" />
</button>
</div>
<div>
<button>
<h6>Coca Kola</h6>
<img src="../../assets/cocaKolaPersona.png" />
</button>
</div>
<div>
<button>
<h6>Sprite</h6>
<img src="../../assets/sprite.webp" />
</button>
</div>
<div>
<button>
<h6>Cielo</h6>
<img src="../../assets/cieloPersonal.webp" />
</button>
</div>
<div>
<button>
<h6>San Mateo</h6>
<img src="../../assets/sanmateoPersonal.webp" />
</button>
</div>
<div>
<button>
<h6>Ruskalla</h6>
<img src="../../assets/ruskalla.webp" />
</button>
</div>
<div>
<button>
<h6>Ron</h6>
<img src="../../assets/ron.webp" />
</button>
</div>
<div>
<button>
<h6>Cristal</h6>
<img src="../../assets/cristal.jpg" />
</button>
</div>
</div>
<div v-if="producto === 'carnes'" class="tabcontent">
<div>
<button>
<h6>Pollo</h6>
<img src="../../assets/pollo.jpg" />
</button>
</div>
<div>
<button>
<h6>Carne</h6>
<img src="../../assets/carne.jpg" />
</button>
</div>
<div>
<button>
<h6>Cerdo</h6>
<img src="../../assets/cerdo.jpg" />
</button>
</div>
</div>
<div v-if="producto === 'tuberculos'" class="tabcontent">
<div>
<button>
<h6>Papa</h6>
<img src="../../assets/papa.jpg" />
</button>
</div>
<div>
<button>
<h6>Yuca</h6>
<img src="../../assets/yuca.jpg" />
</button>
</div>
<div>
<button>
<h6>Olluco</h6>
<img src="../../assets/olluco.webp" />
</button>
</div>
<div>
<button>
<h6>Jengibre</h6>
<img src="../../assets/jengibre.jpg" />
</button>
</div>
</div>
</div>
</div>
</template>
<style lang="sass" scoped>
#contenedor
display: flex
justify-content: center
#padre
width: 100%
display: flex
flex-direction: column
justify-content: center
#barra
margin-top: 40px
display: flex
button
border-radius: 0px
.tabcontent
background-color: #999999
display: flex
flex-wrap: wrap
justify-content: space-around
width: 100%
height: 100%
div
margin: 20px
flex-grow: 1
button
border: 0px
img
width: 100px
height: 120px
</style>
<script>
import Modal from "./Modal";
export default {
name: "Barra",
data: function () {
return {
producto: "bebidas",
modalEstado : false
};
},
methods: {
mostrar: function (a) {
this.producto = a;
},
modal(){
this.modalEstado=true;
console.log(this.modalEstado);
}
},
};
</script>