Show bootstrap modal using vuejs script - vuejs2

Question

I want to show a modal based on conditions. Item array contains items with or without variants.If no variants i have push item to cart array directly.Otherwise i will show pop up to select variants. I have tried with below code .but not working .
<template>
<div>
<div class="row">
<div
class="col-6"
v-for="(item, index) in filteredItem"
:key="index"
style="margin-top: 10px; margin-bottom: 10px"
#click="add_cart(item)"
>
<label class="p-3 rounded border border-gray-300">
<span class="ml-2 text-gray-800">
<strong class="text-black-600"
>{{ item.name }}</strong
>
<i class="text-success my-0"> (£ {{ item.price }}) </i>
</span>
</label>
</div>
</div>
<div
class="modal fade center"
id="exampleModal"
tabindex="-1"
role="dialog"
aria-labelledby="exampleModalLabel"
aria-hidden="true"
:data-show="modal"
>
//modal body
</div>
</template>
//script
data() {
return {
modal:false
}
}
methods:{
add_cart(item) {
if (item.item_type == "simple") {
let cartItem = {
item_id: item.id,
item_name: item.name,
item_price: item.price,
quantity: 1,
};
this.cartItems.push(cartItem);
} else {
//toggle modal for select item variants
this.modal = true;
}
}