Options.vue

<template>

  <div>
    <div v-for="item in items">
      <slot v-slot="api(item)"/>
    </div>
  </div>

  <!-- How to use

    ...

    <Options>

      <template v-slot:default="{item, select, selected}">
        <Card :class="classes(item, selected)" @click="select"></Card>
      </template>

    </Options>

    ...

  -->

</template>

<script>

export default {
  props: {
    value: Object, //any
  },
  methods: {
    select(item) {
      this.value = item
      this.$emit('input', this.value)
    },
    toggle(item) {
      this.select((this.value === item) ? null : item)
    },
    api(item) {
      return {
        item,
        selected: (this.item === item),
        select: this.select.bind(this, item),
        toggle: this.toggle.bind(this, item),
      }
    }
  },
}

</script>