How can I get a vue component's contents(modal window) by clicking a button which is contained in another vue component?

Question

I am trying to sort my basic Vue application into components. I have a product listing, each contains some information and a button. The button(more details button) when clicked opens a modal window that contains that specific product's further information. I have a product listing component and a modal window component in Vue. I am not really sure how I could call the modal window component containing that particular product's info from the product listing when the user clicks the button. I would appreciate some help with this. This is what I have so far:

PRODUCT LISTING COMPONENT

<template>
    <div class="content">
        <div class="nested" v-for="product in products">
            <div class="one"><span>{{product.Name}}</span></div>
            <div class="two"><img src="src/assets/shape.svg" style="height: 80px; width: 80px;"><span>-{{ product.Reduction_percentage }}%</span></div>       
            <div class="three"><span>{{ product.Short_Description }}</span></div>
            <div class="four"><b-btn v-b-modal="'productModal'" @click="chooseProduct(product)" product_item="'product'">More details</b-btn></div>
        </div>
    </div>
</template>

<script>
export default {
  data () {
    return {
        products: [
              {id: 1, Name: 'Product 1', Reduction_percentage: 30, Short_Description:"Something", Description:"Something more"},
              {id: 2, Name: 'Product 2', Reduction_percentage: 33, Short_Description:"Something", Description:"Something more"},
              {id: 3, Name: 'Product 3', Reduction_percentage: 23, Short_Description:"Something", Description:"Something more"},
              {id: 4, Name: 'Product 4', Reduction_percentage: 77, Short_Description:"Something", Description:"Something more"},
              {id: 5, Name: 'Product 5', Reduction_percentage: 99, Short_Description:"Something", Description:"Something more"},
          ]
    }
  },
methods: {
            chooseProduct: function (product) {
            this.chosenProduct = product
        },
}
</script>

MODAL WINDOW COMPONENT

<template>
<b-modal id="productModal" v-if="chosenProduct" :title="chosenProduct.Name">
            <div class = "inner-container">
                <div class = "inner-nested">
                    <div class="inner-one"><br> {{chosenProduct.Description}}</div>
                    <div class="inner-two">
                        -{{ chosenProduct.Reduction_percentage }}%</div>  
                    <div class="inner-three"> <button>Buy Now</button></div>
                </div>
            </div>
        </b-modal>
</template>

Answer 1

There are basically 3 categories of component communication:

1. Parent to Child: Use Props

2. Child to Parent: Use emits

3. Any to any: Use either an event bus (not recommending) or add Vuex to your project to handle your app state