JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-vue.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-vue.js"></script>
<div id="myapp">
    <h1> {{ allRecords() }} </h1>

    <div class="wrapper">

        <div class="grid-container" v-for="product in products" v-bind:key="product.ID">

            <div class="Area-1"><img class="product_image" src="https:....single_product.jpg"> </div>

            <div class="Area-2">
                <div class="amount">{{ product.amount }} </div>
                {{ product.Description }}</div>

            <div class="Area-3">
                <b-button size="sm" v-b-modal="'productModal'" @click="chooseProduct(product)" product_item="'product'">More Details >> </b-button>
                
            </div>

            <div class="Area-4">
                <br>
                <button>Buy</button>
            </div>
        </div>

        <b-modal id="productModal" v-if="chosenProduct">
            <h1> {{ chosenProduct.Name }} </h1>
            <h3> {{ chosenProduct.Description }} </h3>
        </b-modal>
    </div>
</div>

JavaScript

Vue.use(BootstrapVue)

var app = new Vue({
    'el': '#myapp',
    data: {
        products: [],
        chosenProduct: null
    },
    methods: {
    		chooseProduct: function (product) {
        	this.chosenProduct = product
        },
        allRecords: function(){
					this.products = [
          	{
            	ID: 1,
            	Description: 'dek',
              Name: 'Name',
              amount: 100
            },
            {
            	ID: 2,
            	Description: 'dek 2',
              Name: 'Name 2',
              amount: 300
            }
          ]
        },
    }
})