<template>
  <div>
    <div class="title mb-3">
      {{ options.title }}
    </div>
    <slot v-if="$slots.default" />
    <sidebar-section-item
      v-for="(item, index) in options.items"
      :key="index"
      :item="item"
    />
  </div>
</template>

<script>
import SidebarSectionItem from '@/views/dark-template/SidebarSectionItem'
export default {
  name      : 'SidebarSection',
  components: { SidebarSectionItem },
  props     : { options: { type: String, default: 'Section' } },
}
</script>

<style scoped>
.title {
    border-bottom: 2px #bfbfbf solid;
  font-weight: 300;
  line-height: 1.5 !important;
  letter-spacing: 0.2em !important;
}
</style>

<template>
  <div class="mb-4">
    <div class="title mb-3">
      {{ options.title }}
    </div>
    <slot v-if="$slots.default" />
    <slot v-else-if="$scopedSlots.items">
      <slot
        name="items"
        :items="options.items"
      />
    </slot>
    <template v-else-if="$scopedSlots.item">
      <slot
        v-for="(item) in options.items"
        name="item"
        :item="item"
      />
    </template>
    <template v-else>
      <sidebar-section-item
        v-for="(item, index) in options.items"
        :key="index"
        :item="item"
      />
    </template>
  </div>
</template>

<script>
import SidebarSectionItem from '@/views/dark-template/SidebarSectionItem'
export default {
  name      : 'SidebarSection',
  components: { SidebarSectionItem },
  props     : { options: { type: String, default: 'Section' } },
}
</script>

<style scoped>
.title {
    border-bottom: 2px #bfbfbf solid;
  font-weight: 300;
  line-height: 1.5 !important;
  letter-spacing: 0.2em !important;
}
</style>

Make sidebar-section more flexible using v-slots
Make sidebar-section more flexible using v-slots
