Fix usePage() reactivity in Vue 2 adapter (#1527)

* Change minimum required version of Vue to 2.7

* Make `usePage()` reactive

Author: reinink

package-lock.json

@@ -52,10 +52,10 @@
   "devDependencies": {
     "esbuild": "^0.16.13",
     "typescript": "^4.9.4",
-    "vue": "^2.6.0"
+    "vue": "^2.7.0"
   },
   "peerDependencies": {
-    "vue": "^2.6.0"
+    "vue": "^2.7.0"
   },
   "dependencies": {
     "@inertiajs/core": "1.0.4",

packages/vue2/package.json

@@ -1,5 +1,5 @@
 import { createHeadManager, Page, router } from '@inertiajs/core'
-import { Component, PluginObject } from 'vue'
+import { Component, computed, PluginObject, reactive } from 'vue'
 import { ComponentOptions } from 'vue/types/umd'
 import remember from './remember'
 import { VuePageHandlerArgs } from './types'
@@ -124,5 +124,10 @@ export const plugin: PluginObject<any> = {
 }
 
 export function usePage() {
-  return app.page
+  return reactive({
+    props: computed(() => app.page.props),
+    url: computed(() => app.page.url),
+    component: computed(() => app.page.component),
+    version: computed(() => app.page.version),
+  })
 }

packages/vue2/src/app.ts

@@ -2,7 +2,9 @@
 import { Link, usePage } from '@inertiajs/vue2'
 import { computed } from 'vue'
 
-const appName = computed(() => usePage().props.appName)
+const page = usePage()
+
+const appName = computed(() => page.props.appName)
 </script>
 
 <template>