Display dynamic modal vuetify v-dialog in component Nuxtjs3 - modal-dialog

Question

I want to open a dynamic modal on v-card onclick, each card clicked will change the content of the v-dialog.
In my case it open once and then nothing happen.
here the view
<template>
<div>
<OrderComment :display="display"/>
<h1 align="center">Commandes à Livrer</h1>
<v-row>
<!-- <Message></Message> -->
<v-col lg="3" sm="6" v-for="order in orders.orders" v-bind:key="order.id" class="mt-16">
<!-- </v-sheet>-->
<v-card #click="displayModal(order.id)">
<v-card-title align="center" class="big-font">
<strong>{{ order.id }}</strong>
</v-card-title>
<v-divider class="mx-4"></v-divider>
<v-card-text>
{{ order.date_upd }}
<!-- <OrderPartialCustomer :id_customer="order.id_customer" /> <br/>-->
<OrderPartialAddress :id_address_delivery="order.id_address_delivery"/>
</v-card-text>
<v-card-actions>
<v-btn #click="changeStatus(order.id)">
Passer en Livre
</v-btn>
</v-card-actions>
</v-card>
</v-col>
</v-row>
</div>
</template>
method in script
const display = ref(false);
function displayModal(id_order: String) {
display.value = true;
console.log(display.value)
}
And my component
<template v-slot:activator="{ on, attrs }">
<div>
<v-dialog
v-model="props.display"
width="500"
>
<v-card>
<v-card-title class="text-h5 grey lighten-2">
Commentaires
</v-card-title>
<v-card-text>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</v-card-text>
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn
color="danger"
text
#click="display = false"
>
Fermer
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</div>
</template>
<script lang="ts" setup>
const props = defineProps({
display: {
type: Boolean,
required: true,
},
})
</script>
So finally it works only once. I don't know what is wrong or how i have to achieve it. I even don't know if i have to use v-slot:activator