How to put scoped slot's template code to separate component?

The code looks as following:

App.vue:

<template>
  <div id="app">

    <List :items="listItems">
      <template v-slot="row">
        <div class="first-part">
          {{ row.item.title }} |
          <span class="second-part">
            {{ row.item.description }}
          </span>
        </div>
      </template>
    </List>

  </div>
</template>

<script>
import List from './components/List.vue'

export default {
  name: 'App',
  components: {
    List,
  },
  data() {
    return {
      listItems: [
        { title: 'First item', description: 'Description1' },
        { title: 'Second item', description: 'Description2' }, 
        { title: 'Third item', description: 'Description3' },
        { title: 'Fourth item', description: 'Description4' },
        { title: 'Fifth item', description: 'Description5' },
      ],
    }
  },
}
</script>

<style>
.first-part {
  color: red;
}
.second-part {
  color: green;
}
</style>

List.vue:

<template>
  <div class="set-list">
    <slot v-for="item in items" :item="item">
    </slot> 
  </div>
</template>

<script>
export default {
  props: {
    items: {
      type: Array,
      default: () => [],
    },
  },
}
</script>

<style scoped>
.set-list {
  border: 1px solid blue;
  margin: 5px;
  width: 25%;
}
</style>

I would like to put the scoped slot’s template code to separate component. Please, take a look at the screenshots attached:

enter image description here

enter image description here

Move this part to a component

<div class="first-part">
    {{ row.item.title }} |
    <span class="second-part">
    {{ row.item.description }}
    </span>
</div>

and pass row as a prop.

So your final App template will look like

<List :items="listItems">
  <template v-slot="row">
    <ListItem :row="row" />
  </template>
</List>