CardContainer.vue

<script>
export default {
  name: 'CardContainer',
}
</script>

<template>
  <div class="container is-fluid is-flex is-flex-direction-column">
    <ul id="matchesList" class="is-flex is-flex-direction-column is-align-item">
      <slot name="favoritos" />
      <slot />
    </ul>
  </div>
</template>

CardList.vue

<script>
import CardContainer from '@/modules/Warehouse/components/CardContainer'
export default {
  name: 'CardList',
  components: { CardContainer },
  data: () => ({
    items: [],
    itemsFavoritos: []
  }),
  methods: {
    toggleFavorite(id) {
      if (this.itemsFavoritos.includes(id)) {
        this.itemsFavoritos = this.itemsFavoritos.filter((i) => i !== id)
        return
      }

      this.itemsFavoritos.push(id)
    },
    hasFavorited(arg) {
      return this.itemsFavoritos.includes(arg)
    }
  }
}
</script>

<template>
  <CardContainer>
    <CardItem
      v-for="match in items"
      @favorite-toggle="toggleFavorite"
      :match="match"
      :key="match.bt365_id"
      :slot="hasFavorited(match.bt365_id) ? 'favorites' : 'default'"
     />
  </CardContainer>
</template>