Vuetify 3 v-dialog not opened immediately after click on mobile browser - vue.js

Question

I am using vue3 and vuetify3 to build a site. When I click the button to open v-dialog, it won't be shown immediately. And during this delay time, whole site will be freezed until the dialog is opened.(Closing dialog has same issue) When there are more objects in the page, it will take more time to open and close.
In addition, I found that there just a liitle bit delay on desktop device but huge delay on mobile device.
How could I imporve the performance of this?
Environment
Vue: 3.2.37
Vuetify: 3.0.0-beta5
Mobile Device: iPhone 13 Pro Max (iOS 15.5)
Mobile Browser: Safari, Edge, Chrome
Desktop OS: Windows 11
Desktop Browser: Edge, Chrome
This is my code structure
ItemList.vue
<template>
<div v-for="(item,index) in itemList" :key="index">
<Item :item="item" />
</div>
<v-dialog v-model="dialog.open" transition="fade-transition">
<!-- item detail -->
<div>{{ dialog.item }}</div>
<v-btn #click="dialog.open = false">Close</v-btn>
</v-dialog>
</template>
<script>
import Item from './Item.vue';
export default {
name: 'ItemList',
data: () => ({
dialog: {
open: false,
item: {}
},
}),
props: ['itemList'],
components: {
Item,
},
methods: {
openDialog(item) {
this.dialog.item = item;
this.dialog.open = true;
},
}
};
</script>
Item.vue
<template>
<div>
<!-- item text and image -->
<v-btn #click.stop="openDialog(item)">Info</v-btn>
</div>
</template>
<script>
export default {
name: 'Item',
data: () => ({}),
components: {},
props: ['item'],
methods: {
openDialog(item) {
this.$emit('openDialog', item);
},
},
};
</script>