nested slot examples.

schedule.vue

<template>
  <div class="container" style="margin-top: 5rem;">
    <div class="row">
      <div class="col-md-6 offset-md-3">
        <ToDoList :items="items">
          <template v-slot:todo-item-after="{ item }">
            <i v-if="isFinished(item)" class="fas fa-check" />
          </template>
        </ToDoList>
      </div>
    </div>
  </div>
</template>

<script>
import ToDoList from '~/components/ToDoList'
import _ from 'lodash'

export default {
  components: { ToDoList },
  data() {
    return {
      items: [
        { id: 1, title: 'todo item 1' },
        { id: 2, title: 'todo item 2' },
        { id: 3, title: 'todo item 3' },
        { id: 4, title: 'todo item 4' }
      ],
      finished: [ 1, 2 ]
    }
  },
  methods: {
    isFinished(item) {
      return _.includes(this.finished, item.id)
    }
  }
}
</script>

TodoItem.vue

<template>
  <li>
    <span class="text-muted mr-1">{{ item.id }}.</span> {{ item.title }}
    <slot name="after" :item="item" />
  </li>
</template>

<script>
export default {
  props: [ 'item' ]
}
</script>

TodoList.vue

<template>
  <ul>
    <ToDoItem v-for="item in items" :key="item.id" :item="item">
      <template v-slot:after="{ item }">
        <slot name="todo-item-after" :item="item" />
      </template>
    </ToDoItem>
  </ul>
</template>

<script>
import ToDoItem from './ToDoItem'

export default {
  components: { ToDoItem },
  props: [ 'items' ]
}
</script>