[Bug]: Issue with Button as-child prop when using link

[jupelost]

Environment

Developement/Production OS: Windows 10 19043.1110
Node version: 16.0.0
Package manager: pnpm@8.6.0
Radix Vue version: 1.0.0
Shadcn Vue version: 1.0.0
Vue version: 3.0.0
Nuxt version: 3.0.0
Nuxt mode: universal
Nuxt target: server
CSS framework: tailwindcss@3.3.3
Client OS: Windows 10 19043.1110
Browser: Chrome 90.0.4430.212

Link to minimal reproduction

https://www.shadcn-vue.com/docs/components/button.html#as-child

Steps to reproduce

Using the as child prop doesnt work as expected

<script setup lang="ts">
import { Button } from '@/components/ui/button'
</script>

<template>
  <Button as-child>
    <NuxtLink to="/login">
      Login
    </NuxtLink>
  </Button>
</template>

Doing it this way doesnt make the whole button clickable

Describe the bug

When using as-child prop in Button and putting a Nuxt Link in the center the Link doesnt take up the width and height of the button by default i noticed this after testing on mobile

Heres a button i have in my navbar when i inspect the css this is what it looks like and here is the code

as you can see when passing the nuxt link as a child it doesnt take up the space of the entire button and is only clickable in the middle.

one way around this is to style the link further and getting rid of the padding for the button because it adds padding on left and right

here is another button in my app

here is the css inspect as you see here its now not only in the middle and taking up the entire space

here is the code

the as child example on the shadcn vue site also has the same issue:

Expected behavior

The Link inside the button should automatically wrap the entire link so that when you click anywhere in the button it should act as a link

Conext & Screenshots (if applicable)

No response

[jupelost]

God speed 🙏