A demonstration of the vue component provider pattern

provider-pattern.vue

<template>
  <div v-for="card in results">
    <card-provider :card="card">
      <template v-slot="cardProps">
        <card v-bind="cardProps" />
      </template>
    </card-provider>
  </div>
</template>

provider.vue

<template>
  <slot v-bind:cardProps="cardProps" />
</template>

<script>
  name: 'CardProvider',
  props: {
    card: {
      type: Object,
      required: true
    }
  },
  computed: {
    cardProps() {
      // ensure keys of this object match the card component prop names
      return {
        cardTitle: this.title,
        
        // conditional object properties:
        ...(this.card.model !== 'author' && this.footerTitle)
        
      }
    },
    title () {
      return this.card.model === 'author' ? this.card.full_name : this.card.title
    }, 
    footerTitle () {
      // this object will be merged directly into this.cardProps if logic above passes
      return {
        // ensure key of this object matches the card component prop names
        cardFooterTitle: this.card.authors[0].full_name
      } 
  }
</script>

You could have more than 1 card provider depending on the scenario / part of the app / website.