fix(vue-app): use getter to provide this.$nuxt (#8170)

packages/vue-app/template/App.js

@@ -98,7 +98,8 @@ export default {
   },
   created () {
     // Add this.$nuxt in child instances
-    Vue.prototype.<%= globals.nuxt %> = this
+    this.$root.$options.<%= globals.nuxt %> = this
+
     if (process.client) {
       // add to window so we can listen when ready
       window.<%= globals.nuxt %> = <%= (globals.nuxt !== '$nuxt' ? 'window.$nuxt = ' : '') %>this

packages/vue-app/template/index.js

@@ -44,6 +44,13 @@ Vue.component(NuxtChild.name, NuxtChild)
 // Component: <Nuxt>
 Vue.component(Nuxt.name, Nuxt)
 
+Object.defineProperty(Vue.prototype, '<%= globals.nuxt %>', {
+  get() {
+    return this.$root.$options.<%= globals.nuxt %>
+  },
+  configurable: true
+})
+
 <% if (features.meta) {
 // vue-meta configuration
 const vueMetaOptions = {

test/dev/ssr.test.js

@@ -110,6 +110,19 @@ describe('ssr', () => {
     await stressTest('/asyncData')
   })
 
+  test('does not share state', async () => {
+    const [page1, page2] = await Promise.all([
+      nuxt.server.renderRoute('/context'),
+      nuxt.server.renderRoute('/context/child')
+    ])
+
+    expect(page1.html).toContain('vm: /context')
+    expect(page1.html).toContain('context: /context')
+
+    expect(page2.html).toContain('vm: /context/child')
+    expect(page2.html).toContain('context: /context/child')
+  })
+
   // Close server and ask nuxt to stop listening to file changes
   afterAll(async () => {
     await nuxt.close()

test/fixtures/ssr/pages/context.vue

@@ -0,0 +1,10 @@
+<template>
+  <div>
+    <section data-test="parent">
+      <pre>vm: {{ $route.fullPath }}</pre>
+      <pre>context: {{ $nuxt.context.route.fullPath }}</pre>
+    </section>
+
+    <NuxtChild />
+  </div>
+</template>

test/fixtures/ssr/pages/context/_id.vue

@@ -0,0 +1,6 @@
+<template>
+  <section data-test="child">
+    <pre>vm: {{ $route.fullPath }}</pre>
+    <pre>context: {{ $nuxt.context.route.fullPath }}</pre>
+  </section>
+</template>