vue slots scope custom component

app.vue

<template>
  <div>
    <List #List="list" :contents="[{name:1}, {name:2}]">
      <div>{{list.content}}</div>
    </List>
  </div>
</template>

<script>
import List from './List';
export default {
  name: 'app',
  components: { List },
};
</script>

List.vue

<template>
  <div>
    <div v-for="(content, index) in contents" :key="`key_${identifier}_${index}`">
      <slot name="List" :content="content"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'List',
  computed: {
    identifier() {
      return (
        Math.random()
          .toString(36)
          .substring(2, 15) +
        Math.random()
          .toString(36)
          .substring(2, 15)
      );
    },
  },
  props: {
    contents: {
      type: Array,
      default: () => [],
    },
  },
};
</script>
<style scoped>
</style>