Nuxt async fetch() 创建多个实例？重复调用 fetch()

我有一个简单的BasePreviewImage需要从内部 API 异步获取 Array.Buffer() 的组件。然而，看来async fetch()尽管组件本身被破坏，但每个创建的实例都会被调用。

Example:

<template>
  <div class="image-container">
  </div>
</template>


<script lang="ts">
import { Vue, Component, Prop } from 'nuxt-property-decorator'

@Component({})
export default class BasePreviewImage extends Vue {
  @Prop({ type: String }) id: string
  @Prop({ type: String, default: 'small' }) size: string

  image: string = ''

  async fetch() {
    console.log('async fetch', this)
  }

  created() {
    console.log('created')
  }

  mounted() {
    console.log('mounted')
  }

  beforeDestroy() {
    console.log('beforeDestroy')
  }
}
</script>

当我加载带有 1 的页面时的输出BasePreviewImage组件然后返回，然后重新打开页面。这将继续调用 fetch n 次页面已打开的次数。

如何避免在用户导航页面时多次调用 API，以及这里是否存在其他内存泄漏？

我不太确定问题是否出在代码、配置上vue, nuxt, nuxt-property-decorator, vue-class-component， 或者别的地方。

相关但没有帮助：https://github.com/vuejs/vue-class-component/issues/418 https://github.com/vuejs/vue-class-component/issues/418