Alpine js and Tailwind fetch data

I start to learn the alpine js combine with the tailwind. But I don't know how to print the fetch result from json response, try with this

<div x-data="orderSearch()"
        class="container mx-auto py-6 px-4"
    >
    <div class="flex border-2 border-gray-200 rounded">
<input type="text" class="px-4 py-2 w-100 uppercase" placeholder="Search" name="orderidSearch"
       x-model="orderidSearch">

<button @click="fetchFulfillment()" class="px-2 py-1 text-white bg-blue-500 rounded hover:bg-green-600">Cari Fulfillment</button>

but return the error in console alpine.js:115 Alpine Error: "TypeError: Cannot read properties of undefined (reading 'inv_id')"

Anyone know how to print the result inside div?

My js function:

function orderSearch() {
            return {
                orderidSearch: '',
                // other default properties
                
                orders: [],
                fetchOrders() {
                    this.isLoading = true;
                    fetch(`check.php?order_id=${this.orderidSearch}`)
                        .then(res => res.json())
                        .then(data => {
                            this.isLoading = false;
                            this.orders = data.orders;
                            console.log(data);
                        });
                    console.log(this.orders);

                },
                ....

json return data:

{"data":[{"inv_id":"8768768768"]}