fix(router): make useLink link reactive (#19386)

fixes #19300

packages/vuetify/src/components/VBreadcrumbs/__tests__/VBreadcrumbs.spec.cy.tsx

@@ -109,6 +109,11 @@ describe('VBreadcrumbs', () => {
     cy.then(() => {
       expect(router.currentRoute.value.path).to.equal('/about')
     })
+
+    // Return back to root to not break succeeding tests that don't have /about path.
+    cy.get('.v-breadcrumbs').then(() => {
+      router.push('/')
+    })
   })
 
   it('should apply active color', () => {

packages/vuetify/src/composables/router.tsx

@@ -64,22 +64,27 @@ export function useLink (props: LinkProps & LinkListeners, attrs: SetupContext['
       href: toRef(props, 'href'),
     }
   }
+  // vue-router useLink `to` prop needs to be reactive and useLink will crash if undefined
+  const linkProps = computed(() => ({ ...props, to: props.to ? props.to : {} }))
 
-  const link = props.to ? RouterLink.useLink(props as UseLinkOptions) : undefined
+  const routerLink = RouterLink.useLink(linkProps.value as UseLinkOptions)
+  // Actual link needs to be undefined when to prop is not used
+  const link = computed(() => props.to ? routerLink : undefined)
   const route = useRoute()
 
   return {
     isLink,
     isClickable,
-    route: link?.route,
-    navigate: link?.navigate,
-    isActive: link && computed(() => {
-      if (!props.exact) return link.isActive?.value
-      if (!route.value) return link.isExactActive?.value
-
-      return link.isExactActive?.value && deepEqual(link.route.value.query, route.value.query)
+    route: link.value?.route,
+    navigate: link.value?.navigate,
+    isActive: computed(() => {
+      if (!link.value) return false
+      if (!props.exact) return link.value.isActive?.value ?? false
+      if (!route.value) return link.value.isExactActive?.value ?? false
+
+      return link.value.isExactActive?.value && deepEqual(link.value.route.value.query, route.value.query)
     }),
-    href: computed(() => props.to ? link?.route.value.href : props.href),
+    href: computed(() => props.to ? link.value?.route.value.href : props.href),
   }
 }