Nested scoped slots in Vue templates

App.vue

<template>
  <manage-lists v-model="items">
    <template scope="{ item: user }">
      {{ user.firstName }} {{ user.lastName }}
    </template>
  </manage-lists>
</template>

<script>
  export default {
    components: {
      ManageLists
    },
    data() {
      return {
        items: [
          { firstName: "John", lastName: "Doe" },
          { firstName: "Renae", lastName: "McGillicuddy" }
        ]
      };
    }
  }
</script>

ManageLists.vue

<template>
  <div>
    <token-list :value="items" @input="forwardInput">
      <template scope="props">
        <slot v-bind="props"></slot>
      </template> 
    </token-list>
    <form class="form" @submit.prevent="handleAdd">
      <input type="text" placeholder="New Item" v-model="newItem" ref="newItem" />
      <button type="submit">Add Item</button>
    </form>
  </div>
</template>

<script>
  import TokenList from "./TokenList";
  
  export default {
    props: {
      value: {
        type: Array,
        default() {
          return [];
        }
      }
    },
    components: {
      TokenList
    },
    methods: {
      handleAdd() {
        this.$emit( "input", this.value.concat( this.newItem ) );
        this.newItem = "";
        this.$refs.newItem.focus();
      },
      forwardInput( payload ) {
        this.$emit( "input", payload );
      }
    }
  }
</script>

TokenList.vue

<template>
  <div class="token-list clearfix">
    <div v-for="( item, index ) in value" class="token-item">
      <slot :item="item" :index="index">
        <span>{{ item }}</span>
        <button type="button" @click="remove( index )">&times;</button>
      </slot>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      value: {
        required: true
      }
    }
    methods: {
	    remove( index ) {
        this.$emit( "input", [
          ...this.value.slice( 0, index ),
          ...this.value.slice( index + 1 )
        ] );
      }
    }
  }
</script>