Nuxt async fetch() creating multiple instances? Repeated fetch() calls

问题

I have a simple BasePreviewImage component that needs to fetch an Array.Buffer() asynchronously from an internal API. However, it appears that async fetch() is called for every instance ever created despite the components themselves being destroyed.

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>

Output when I load a page with 1 BasePreviewImage component then back, then re-open the page. This continues calling fetch n times the page has been opened.

How do I avoid making the API call multiple times as a user navigates pages and is there some other memory leak going on here?

I'm not really sure if the problem is code, config, vue, nuxt, nuxt-property-decorator, vue-class-component, or somewhere else.

Related but not helpful: https://github.com/vuejs/vue-class-component/issues/418

来源：https://stackoverflow.com/questions/62742764/nuxt-async-fetch-creating-multiple-instances-repeated-fetch-calls