update

node_modules/@nuxt/vue-app/template/mixins/fetch.client.js

@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import { hasFetch, normalizeError, addLifecycleHook } from '../utils'
+import { hasFetch, normalizeError, addLifecycleHook, createGetCounter } from '../utils'
 
 const isSsrHydration = (vm) => vm.$vnode && vm.$vnode.elm && vm.$vnode.elm.dataset && vm.$vnode.elm.dataset.fetchKey
 const nuxtState = window.<%= globals.context %>
@@ -38,7 +38,7 @@ function created() {
 
   // Hydrate component
   this._hydrated = true
-  this._fetchKey = +this.$vnode.elm.dataset.fetchKey
+  this._fetchKey = this.$vnode.elm.dataset.fetchKey
   const data = nuxtState.fetch[this._fetchKey]
 
   // If fetch error
@@ -60,12 +60,22 @@ function createdFullStatic() {
   if (typeof this.$options.fetchOnServer === 'function') {
     fetchedOnServer = this.$options.fetchOnServer.call(this) !== false
   }
-  if (!fetchedOnServer || this.$nuxt.isPreview || !this.$nuxt._pagePayload) {
+  if (!fetchedOnServer || this.<%= globals.nuxt %>.isPreview || !this.<%= globals.nuxt %>._pagePayload) {
     return
   }
   this._hydrated = true
-  this._fetchKey = this.$nuxt._payloadFetchIndex++
-  const data = this.$nuxt._pagePayload.fetch[this._fetchKey]
+
+  const defaultKey = this.$options._scopeId || this.$options.name || ''
+  const getCounter = createGetCounter(this.<%= globals.nuxt %>._fetchCounters, defaultKey)
+
+  if (typeof this.$options.fetchKey === 'function') {
+    this._fetchKey = this.$options.fetchKey.call(this, getCounter)
+  } else {
+    const key = 'string' === typeof this.$options.fetchKey ? this.$options.fetchKey : defaultKey
+    this._fetchKey = key ? key + ':' + getCounter(key) : String(getCounter(key))
+  }
+
+  const data = this.<%= globals.nuxt %>._pagePayload.fetch[this._fetchKey]
 
   // If fetch error
   if (data && data._error) {
@@ -73,6 +83,12 @@ function createdFullStatic() {
     return
   }
 
+  // If there is a missing payload
+  if (!data) {
+    this.$fetch()
+    return
+  }
+
   // Merge data
   for (const key in data) {
     Vue.set(this.$data, key, data[key])

node_modules/@nuxt/vue-app/template/mixins/fetch.server.js

@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import { hasFetch, normalizeError, addLifecycleHook } from '../utils'
+import { hasFetch, normalizeError, addLifecycleHook, purifyData, createGetCounter } from '../utils'
 
 async function serverPrefetch() {
   if (!this._fetchOnServer) {
@@ -19,14 +19,20 @@ async function serverPrefetch() {
 
 
   // Define an ssrKey for hydration
-  this._fetchKey = this.$ssrContext.nuxt.fetch.length
+  this._fetchKey = this._fetchKey || this.$ssrContext.fetchCounters['']++
 
   // Add data-fetch-key on parent element of Component
   const attrs = this.$vnode.data.attrs = this.$vnode.data.attrs || {}
   attrs['data-fetch-key'] = this._fetchKey
 
   // Add to ssrContext for window.__NUXT__.fetch
-  this.$ssrContext.nuxt.fetch.push(this.$fetchState.error ? { _error: this.$fetchState.error } : this._data)
+  <% if (debug) { %>
+  if (this.$ssrContext.nuxt.fetch[this._fetchKey] !== undefined) {
+    console.warn(`Duplicate fetch key detected (${this._fetchKey}). This may lead to unexpected results.`)
+  }
+  <% } %>
+  this.$ssrContext.nuxt.fetch[this._fetchKey] =
+    this.$fetchState.error ? { _error: this.$fetchState.error } : purifyData(this._data)
 }
 
 export default {
@@ -41,6 +47,18 @@ export default {
       this._fetchOnServer = this.$options.fetchOnServer !== false
     }
 
+    const defaultKey = this.$options._scopeId || this.$options.name || ''
+    const getCounter = createGetCounter(this.$ssrContext.fetchCounters, defaultKey)
+
+    if (typeof this.$options.fetchKey === 'function') {
+      this._fetchKey = this.$options.fetchKey.call(this, getCounter)
+    } else {
+      const key = 'string' === typeof this.$options.fetchKey ? this.$options.fetchKey : defaultKey
+      this._fetchKey = key ? key + ':' + getCounter(key) : String(getCounter(key))
+    }
+
+    // Added for remove vue undefined warning while ssr
+    this.$fetch = () => {} // issue #8043
     Vue.util.defineReactive(this, '$fetchState', {
       pending: true,
       error: null,