Vue props passing problem

I pass Props for my Vue child component but it doesn't work.I show my code below

@foreach ($results as $item)

<a data-label="{{$item->order_id}}"
                                   v-on:click='windowOpen("{{$item->invoice_number}}")'
                                   >View Items </a>
@endforeach
 <Invoice :class="{active:isActive}" @window-close="windowOpen(orderId)" :title="orderId"></Invoice>

const app = createApp({
    data() {
        return {
            isActive: false,
            orderId:''
        }
    },
    methods: {
        windowOpen(test) {
            this.isActive = !this.isActive;
            this.orderId=test;
        }
    }
})

child component

<template>
    <div class="inactive">
        <h2 id="oder_id">Invoice: {{ title }}</h2>
        <table>
            <tr id="invoice_list">
                <th data-label="sku">SKU</th>
                <th data-label="product_name">Product Name</th>
                <th data-label="price">Price</th>
             </tr>

            <tr v-for="item in listItems">

                <td id="sku"> {{ item.sku }}</td>
                <td id="purchaser">{{ item.purchaser }}</td>
                <td id="product_name">{{ item.purchaser_id }}</td>
                <td id="price">{{ item.price }}</td>
                <td id="qantity">{{ item.qantity }}</td>
                <td id="total">{{ item.price * item.qantity }}</td>
            </tr>

        </table>
        <div class="close" v-on:click="windowOpen">X</div>
    </div>
</template>
<script>
export default {
    props: {title:{
            required:true
        }},
    data() {
        return {
            listItems: []
        }
    },

    methods: {
        windowOpen() {
            this.$emit('window-close')
        },

    },

    created () {
        console.log(this.title)
        axios
            .get(`http://localhost:8000/product/${this.title}`)
            .then(response => (this.listItems = response.data))
    }
}
</script>

console.log show just empty string