feat: improve route access

BREAKING CHANGE: `useRoute` now retrieves a reactive RouteLocationNormalized instead of a Ref<RouteLocationNormalized>.
  This means there is no need to use `.value` when accessing the route. You still need to wrap it with `toRefs` if you want to expose parts of the route:
  ```js
  setup () {
    return { params: toRefs(useRoute()).params }
  }
  ```

playground/App.vue

@@ -158,7 +158,7 @@ export default defineComponent({
     const state = inject('state')
 
     const currentLocation = computed(() => {
-      const { matched, ...rest } = route.value
+      const { matched, ...rest } = route
       return rest
     })
 

src/index.ts

@@ -1,9 +1,8 @@
 import createWebHistory from './history/html5'
 import createMemoryHistory from './history/memory'
 import createWebHashHistory from './history/hash'
-import { inject, computed, reactive } from 'vue'
+import { inject } from 'vue'
 import { routerKey, routeLocationKey } from './utils/injectionSymbols'
-import { RouteLocationNormalizedResolved } from './types'
 
 export { LocationQuery, parseQuery, stringifyQuery } from './utils/query'
 
@@ -34,11 +33,5 @@ export function useRouter() {
 }
 
 export function useRoute() {
-  const route = inject(routeLocationKey)!
-  const ret = {} as RouteLocationNormalizedResolved
-  for (let key in route.value) {
-    // @ts-ignore
-    ret[key] = computed(() => route.value[key])
-  }
-  return reactive(ret)
+  return inject(routeLocationKey)!
 }

src/router.ts

@@ -38,7 +38,17 @@ import {
   parseQuery as originalParseQuery,
   stringifyQuery as originalStringifyQuery,
 } from './utils/query'
-import { ref, Ref, markNonReactive, nextTick, App, warn } from 'vue'
+import {
+  ref,
+  Ref,
+  markNonReactive,
+  nextTick,
+  App,
+  warn,
+  computed,
+  reactive,
+  ComputedRef,
+} from 'vue'
 import { RouteRecordNormalized } from './matcher/types'
 import { Link } from './components/Link'
 import { View } from './components/View'
@@ -564,9 +574,19 @@ function applyRouterPlugin(app: App, router: Router) {
       },
     })
 
+  const reactiveRoute = {} as {
+    [k in keyof RouteLocationNormalizedResolved]: ComputedRef<
+      RouteLocationNormalizedResolved[k]
+    >
+  }
+  for (let key in START_LOCATION_NORMALIZED) {
+    // @ts-ignore: the key matches
+    reactiveRoute[key] = computed(() => router.currentRoute.value[key])
+  }
+
   // TODO: merge strats?
   app.provide(routerKey, router)
-  app.provide(routeLocationKey, router.currentRoute)
+  app.provide(routeLocationKey, reactive(reactiveRoute))
 }
 
 async function runGuardQueue(guards: Lazy<any>[]): Promise<void> {

src/utils/injectionSymbols.ts

@@ -1,4 +1,4 @@
-import { InjectionKey, ComputedRef, Ref } from 'vue'
+import { InjectionKey, ComputedRef } from 'vue'
 import {
   RouteLocationMatched,
   Immutable,
@@ -24,5 +24,5 @@ export const viewDepthKey = PolySymbol('rvd') as InjectionKey<number>
 export const routerKey = PolySymbol('r') as InjectionKey<Router>
 // rt = route location
 export const routeLocationKey = PolySymbol('rl') as InjectionKey<
-  Ref<Immutable<RouteLocationNormalizedResolved>>
+  Immutable<RouteLocationNormalizedResolved>
 >