Start a new pull request in StackBlitz Codeflow.

• nuxt-starter-jphpju (Open reproduction)

I've tested various scenarios regarding this PR #26522 and noticed that the useLink from this PR behaves slightly differently from Vue Router's useLink. For example:

<script setup lang="ts">
import { useLink } from 'vue-router'

const props = shallowReactive({
  to: 'https://mini-ghost.dev',
})

const { isActive } = useLink(props)
const { isActive: isNuxtLinkActive } = resolveComponent('NuxtLink').useLink(props)

const onClick = () => {
  if (props.to === '/') {
    props.to = '/about'
  } else {
    props.to = '/'
  }
}
</script>

<template>
  <div>
    <button @click="onClick">
      Click
    </button>

    isActive {{ isActive }} <br>
    isNuxtLinkActive: {{ isNuxtLinkActive }}
  </div>
</template>

When we switch routes by clicking the <button>, Vue Router's isActive reacts to the changes, but <NuxtLink>'s isNuxtLinkActive does not respond to changes in data. This issue might be caused by the following code segment:

Here, we are destructuring the passed props, which if reactive or shallowReactive, would lose their reactivity.

Should we align <NuxtLink>'s useLink behavior with Vue Router's useLink?

Nice find! Yes, we should ensure this remains reactive.