Fetch() is called twice when using is-Directive / Dynamic Component

[jony1993]

Describe the bug
If a component has a fetch() and is included via a dynamic component <component :is="..."/> , then the fetch() is called twice (on ssr AND client). When registering the component globally (e.g. via a plugin), its working and fetch() is only called once.

To Reproduce
Sandbox: https://codesandbox.io/s/blue-bush-5lyew

1. Open https://5lyew.sse.codesandbox.io/childDirect --> See that fetch is only called on ssr
2. Open https://5lyew.sse.codesandbox.io/childViaComponent --> See that fetch is called on ssr and client

Expected behavior
Fetch should be only called once when SSR is activated

Additional context
Background: We are trying to load a list of components from our CMS (Storyblok), and want to show these components via the dynamic component.

[marcohofmann]

Hey @jony1993 ;-)
Thanks for reporting! Today i tried to use <component /> with a manual component import and a disabled auto-import. It worked as expected without calling fetch() two times:

// page/index.vue
<template>
  <div>
    <div v-for="(widget, index) in widgets" :key="index">
      <component :is="widget.__type" />
    </div>
  </div>
</template>

<script>
export default {
  components: {
    fetch: () => import('@/components/fetch.vue')
  },
  data () {
    return {
      widgets: [
        { __type: 'fetch' }
      ]
    }
  }
}
</script>

// components/fetch.vue
<template>
  <div>fetch</div>
</template>

<script>
export default {
  async fetch() {
    await console.log('fetch')
  }
}
</script>

But with an enabled auto-import fetch() is called two-times (SSR & client). Also navigating from page to page on the client.