Nuxtjs: Axios Request does not work when switching to another route

Question

i try to build a little clothing web shop with nuxtjs. You can choose the color on the details page. The details page represents a pice of clothing. The ColorMenu is a component. If you choose something a color, it will emit it back to the details page and will send a new details request to my backend.

However, changing the color only works if you don't choose another piece of clothing. If you choose another piece of clothing (so the route parameters will change) and choose another color in the menu, there is a always an error that it cannot load anything. it seems that it sends repeated requests until the request is blocked.

The details routes are built according to this scheme: localhost/details/{sellableId}/{ideaId}/{appearanceId}

Details Page:

<template>
  <section class="section">
    <div v-if="details">
      <div class="columns">
        <div class="column">
          <ImageCaroussel :images="details.images"></ImageCaroussel>
        </div>
        <div class="column">
          <h3>Farben</h3>
          <ColorMenu
            :appearances="productType.appearances"
            :appearanceIds="details.appearanceIds"
          ></ColorMenu>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
import { mapState } from 'vuex'
import Dropdown from '~/components/details/Dropdown.vue'
import ColorMenu from '~/components/details/ColorMenu.vue'
import ImageCaroussel from '~/components/details/ImageCaroussel.vue'

export default {
  created() {
    this.$nuxt.$on('selected', ($event) => (this.selected = $event))
    this.$nuxt.$on('selectedColor', ($event) => this.setSelectedColor($event))
  },
  data() {
    return {
      modal: false,
      selected: '',
      selectedColor: '',
    }
  },
  async asyncData({ store, params }) {
    console.log('asyncfirst')
    if (params.sellableId && params.appearanceId && params.ideaId) {
      await store.dispatch('details/get_details', {
        sellableId: params.sellableId,
        appearanceId: params.appearanceId,
        ideaId: params.ideaId,
      })
      let sellableId = params.sellableId
      let appearanceId = params.appearanceId
      let ideaId = params.ideaId
      console.log('asyncsecond!')
      return { sellableId, appearanceId, ideaId }
    }
  },

  mounted() {
    this.sellableId = this.$route.params.sellableId
    this.appearanceId = this.$route.params.appearanceId
    this.ideaId = this.$route.params.ideaId
    console.log('Mounted!')
  },

  components: {
    Dropdown,
    ColorMenu,
    ImageCaroussel,
  },

  computed: {
    ...mapState({
      details: (state) => {
        return state.details.details
      },
      currency: (state) => {
        return state.sellable.currency
      },
      productType: (state) => {
        return state.details.productType
      },
    }),
  },
  methods: {
    checkout: async function (sellableId, size, appearanceId) {
      let link = await this.$backendrepositories.basket.checkout(
        sellableId,
        size,
        appearanceId
      )
      if (link.status === 200 && link.data) {
        this.modal = true
        setTimeout(() => {
          window.location.href = link.data.link
        }, 3000)
      }
    },
    setSelectedColor: async function (event) {
      this.selectedColor = event
      await this.$store.dispatch('details/get_details', {
        sellableId: this.sellableId,
        appearanceId: this.selectedColor,
        ideaId: this.ideaId,
      })
    },
  },
}
</script> 

ColorMenu Component:

<template>
  <div>
    <div
      v-for="(cell, index) in appearances"
      :key="index"
      style="display: inline-block"
    >
      <label v-if="appearanceIds.includes(cell.id)" class="self-container">
        <input type="radio" checked="checked" name="color" />
        <span
          class="checkmark"
          :style="`background-color: ${cell.colors[0].value}`"
          @click="select(cell.id)"
        ></span>
      </label>
    </div>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      selected: '',
    }
  },
  props: ['appearances', 'appearanceIds'],
  methods: {
    select(select) {
      this.selected = select
      this.$nuxt.$emit('selectedColor', this.selected)
    },
  },
}
</script>

There is a live demo at https://akano-frontend.vercel.app/