fix: type issues with new wrapper functions

docs/content/en/packages/routes.md

@@ -7,22 +7,25 @@ position: 12
 
 In Vue 3, `vue-router` exports composition functions for accessing the current route and router.
 
-These helpers provide an equivalent while using Nuxt 2
+These helpers provide an equivalent whilst using Nuxt 2.
 
 ## useRoute
 
-Returns `this.$route`.
+Returns `this.$route`, wrapped in a computed - so accessible from `.value`.
 
 ```ts
-import { defineComponent, useRoute } from '@nuxtjs/composition-api'
+import { computed, defineComponent, useRoute } from '@nuxtjs/composition-api'
 
 export default defineComponent({
   setup() {
     const route = useRoute()
+    const id = computed(() => route.value.params.id)
   }
 })
 ```
 
+<alert>When migrating to Nuxt 3 you will need to remove `.value` as the native equivalent returns a reactive object, not a computed object.</alert>
+
 ## useRouter
 
 Returns `this.$router`.
@@ -33,6 +36,7 @@ import { defineComponent, useRouter } from '@nuxtjs/composition-api'
 export default defineComponent({
   setup() {
     const router = useRouter()
+    router.push('/')
   }
 })
 ```

docs/content/en/packages/store.md

@@ -2,7 +2,6 @@
 title: useStore
 description: 'Access this.$store with the Nuxt Composition API.'
 category: Packages
-badge: migration
 position: 12
 ---
 
@@ -22,7 +21,7 @@ export default defineComponent({
 })
 ```
 
-You can also provide an injection key to get back a semi-typed store:
+You can also provide an injection key or custom type to get back a semi-typed store:
 
 ```ts
 import { defineComponent, useStore } from '@nuxtjs/composition-api'
@@ -36,7 +35,8 @@ export const key: InjectionKey<Store<State>> = Symbol()
 export default defineComponent({
   setup() {
     const store = useStore(key)
-    // store.state.count will be typed as a number
+    const store = useStore<State>()
+    // In both of these cases, store.state.count will be typed as a number
   }
 })
 ```

src/wrappers.ts

@@ -1,23 +1,31 @@
-import { InjectionKey } from '@vue/composition-api'
+import { computed, ComputedRef, InjectionKey } from '@vue/composition-api'
 import type { Store } from 'vuex'
 
 import { getCurrentInstance } from './utils'
 
-const wrapProperty = (
-  property: keyof NonNullable<ReturnType<typeof getCurrentInstance>>
+export const wrapProperty = <
+  K extends keyof NonNullable<ReturnType<typeof getCurrentInstance>>,
+  T extends boolean = true
+>(
+  property: K,
+  makeComputed?: T
 ) => {
-  return () => {
+  return (): T extends true
+    ? ComputedRef<NonNullable<ReturnType<typeof getCurrentInstance>>[K]>
+    : NonNullable<ReturnType<typeof getCurrentInstance>>[K] => {
     const vm = getCurrentInstance()
     if (!vm) throw new Error('This must be called within a setup function.')
 
-    return vm[property]
+    return makeComputed !== false
+      ? (computed(() => vm[property]) as any)
+      : vm[property]
   }
 }
 
 /**
  * Gain access to the router just like using this.$router in a non-Composition API manner.
  */
-export const useRouter = wrapProperty('$router')
+export const useRouter = wrapProperty('$router', false)
 
 /**
  * Gain access to the route just like using this.$route in a non-Composition API manner.

test/e2e/context.ts → test/e2e/route.ts

@@ -2,24 +2,24 @@ import { t, Selector } from 'testcafe'
 import { navigateTo, expectOnPage } from './helpers'
 
 // eslint-disable-next-line
-fixture`useContext`
+fixture`useRoute`
 
-async function displaysContextCorrectly() {
-  await expectOnPage('path: /context/a')
+async function displaysRouteCorrectly() {
+  await expectOnPage('path: /route/a')
   await expectOnPage('watch function called: 1')
   await t.click(Selector('a').withText('Link with query'))
   await expectOnPage('route query test: true')
   await expectOnPage('watch function called: 2')
   await expectOnPage('route param slug: a')
 }
 
-test('Shows correct context info on server-loaded page', async () => {
-  await navigateTo('/context/a')
-  await displaysContextCorrectly()
+test('Shows correct route info on server-loaded page', async () => {
+  await navigateTo('/route/a')
+  await displaysRouteCorrectly()
 })
 
-test('Shows correct context info on client-loaded page', async t => {
+test('Shows correct route info on client-loaded page', async t => {
   await navigateTo('/')
-  await t.click(Selector('a').withText('context'))
-  await displaysContextCorrectly()
+  await t.click(Selector('a').withText('route'))
+  await displaysRouteCorrectly()
 })

test/fixture/layouts/default.vue

@@ -15,12 +15,12 @@
 </template>
 
 <script>
-import { defineComponent, useContext, useMeta } from '@nuxtjs/composition-api'
+import { defineComponent, useRoute } from '@nuxtjs/composition-api'
 
 export default defineComponent({
   head: {},
   setup() {
-    const { route } = useContext()
+    const route = useRoute()
 
     return { route }
   },

test/fixture/nuxt.config.js

@@ -1,7 +1,7 @@
 // eslint-disable-next-line
 const { resolve } = require('path')
 
-const routes = ['/context/a', '/static/1', '/static/2', '/static/3']
+const routes = ['/route/a', '/static/1', '/static/2', '/static/3']
 const interval = 3000
 
 const isGenerated = [process.env.GENERATE, process.env.NOW_BUILD].includes(

test/fixture/pages/index.vue

@@ -33,7 +33,7 @@
       <li><nuxt-link to="/req-ref">req refs</nuxt-link></li>
       <li><nuxt-link to="/ssr-ref">ssr refs</nuxt-link></li>
       <li><nuxt-link to="/promise">promise</nuxt-link></li>
-      <li><nuxt-link to="/context/a">context</nuxt-link></li>
+      <li><nuxt-link to="/route/a">route</nuxt-link></li>
       <li><nuxt-link to="/hooks">hooks</nuxt-link></li>
       <li><nuxt-link to="/static/1">static</nuxt-link></li>
       <li>

test/fixture/pages/context/_slug.vue → test/fixture/pages/route/_slug.vue

@@ -22,15 +22,18 @@
 
 <script>
 import {
+  computed,
   defineComponent,
-  useContext,
+  useRoute,
   ref,
   watch,
 } from '@nuxtjs/composition-api'
 
 export default defineComponent({
   setup() {
-    const { route, query, params } = useContext()
+    const route = useRoute()
+    const query = computed(() => route.value.query)
+    const params = computed(() => route.value.params)
     const called = ref(0)
     watch(
       route,

test/fixture/pages/static/_id.vue

@@ -14,7 +14,7 @@ import {
   defineComponent,
   computed,
   useStatic,
-  useContext,
+  useRoute,
 } from '@nuxtjs/composition-api'
 
 import { fetcher } from '../../utils'
@@ -23,8 +23,8 @@ const port = process.env.PORT || 3000
 
 export default defineComponent({
   setup() {
-    const { params } = useContext()
-    const id = computed(() => params.value.id)
+    const route = useRoute()
+    const id = computed(() => route.value.params.id)
     const post = useStatic(
       id =>
         process.server && process.static