How to replace Link with other Vuetify components?

Hey Everyone,

I am using Vuetify and Laravel with Inertiajs and ZiggyVue router. I must use the Link inertia component in this app to navigate and avoid reloading.

If I use Vuetify's component like VListItem then I have to use a Link inside it like below:

<VListItem>
	<Link :href="route('profile')">Profile<Link>
</VListItem>

That works for me but the clickable portion of some list item does not redirect the page, it only works when you click closer to the text.

Now I want to replace it with the VListItem component's href prop. Like below:

<VListItem :href="route('profile')" title="Profile">
</VListItem>

It works but it reloads the page when clicked. How to prevent reload and use the Vuetify component instead of the Link component.