fetch is not being called for components added on the client side

When adding components on the client side fetch is not being called or is linked to the wrong payload data. For instance when showing a dialog that fetches CMS content.

Versions

  • nuxt: v2.15.3
  • node: v14.15.1

Reproduction

https://github.com/woutervdm/nuxt-fetch-test-case

<template>
  <div class="container">
    <button
      type="button"
      @click="click"
    >
      Add component
    </button>
    <hello-world
      v-for="i of number"
      :key="i"
    />
  </div>
</template>

<script>
export default {
  data: () => ({
    number: 1
  }),
  methods: {
    click () {
      this.number++
    }
  }
}
</script>

Using the HelloWorld component:

<template>
  <div>
    {{ data }}
    <pre>{{ $fetchState }}</pre>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data: () => ({
    data: ''
  }),
  fetch () {
    this.data = 'Hello world!'
  }
}
</script>

Steps to reproduce

Run yarn generate and yarn start and click on the “add component” button multiple times.

What is Expected?

fetch should be called for each new component and each added component should contain the text “Hello world!”.

What is actually happening?

fetch is not being called and only the firstly added component contains the text. Probably because it is using the same fetch key as the staticly generated component (which also seems incorrect behavior).

1 possible answer(s) on “fetch is not being called for components added on the client side

  1. Thanks. Would be nice if a refetch is performed once the data is not in the payload. I am reusing the same component for parts of the page that are statically generated and for dynamic components.