How can i pass data to a modal component in Vuejs. my issue is that it doest not show up at all on the browser - laravel

Question

this is the modal
<template>
<div>
<transition name="modal" id="modal-template">
<div class="modal-mask" >
<div class="modal-wrapper">
<div class="modal-container" >
<div class="modal-header">
<slot name="header">
</slot>
</div>
<div class="modal-body" >
<slot name="body">
<h4 style="font-size:18px" class="order-title">
<!-- Productname -->
<h4 >{{items.name}}</h4>/<!-- this is not showing -->
</h4>
</slot>
</div>
</div>
</div>
</div>
</transition>
</div>
</template>
The PARENT VIEW..
<template>
<div class="card">
<div v-bind:key="item.item_id" v-for="item in items" class="card-body">
<!--here i add the v-for to loop through the data but its undefined or empty -->
<div class="row product-order">
<div class="col-sm-12 col-lg-12">
<h4 >{{ item.name }}</h4>
<div class="row">
<div class="image-container">
<div class="col-2 product-info-product-image">
<div v-bind:key="items.item_id" v-for="items in item_id">
<OrderdetailModal
v-if="showModal" #close="showModal = false"/>
</div>
<img
#click="goToProductinfo(item.item_id)"
class="center product-info-product-image"
:src="item.product_image"
/>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import axios from 'axios';
import OrderdetailModal from '../components/Orderdetail';
//beginning of data an methods calls
export default
{
name:"Product",
components:{
OrderdetailModal
},
data () {//here is the data of the parent view
return {
item_id:[],
showModal: false
}
},
methods:{
goToProductinfo(item_id)
{ //here is the function that fetch the data.
this.getProductinfo(item_id);//fetches data and set item_id to response
this.showModal = true;//sets modal to true
}
//end of all methods
//these function should work perfectly
}
}
//end of export default
</script>
//end of code