Inertia onclick navigation inside vue component

I have a laravel/vue project where i am currently displaying a list of orders inside a vue component. Inside this component i want a onclick method where if an order is clicked i redirect to another vue component where i display the orders details. I know i have to send the clicked order as a prop but how i can do this in Inertia? I have been trying for a while now but cant figure it out.

Dashboard component (where i display orders) HTML:

<tr v-for="(order, index) in orders" @click="onOrderClick(order)"
                            v-bind:class="index % 2 === 0 ? 'bg-white' : 'bg-gray-50'">
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                {{ order.id }}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                                {{ order.deliveryName }}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                {{ order.createdAt }}
                            </td>

method (tried rendering a view here with inertia but didn't work):

onOrderClick: function (order) {
            console.log('clicked', order.id)
        },

My route:

Route::get('/order/${order.id}', function (){
return Inertia::render('OrderDetails', 'order');
});

Read more here: https://stackoverflow.com/questions/65919393/inertia-onclick-navigation-inside-vue-component