SLOT관련해서 질문드려요

아래 코드와 같이 item.vue파일에서 슬롯을 이름으로 구분해놓고, app.vue에서 슬롯이름별로 값 넣어줬는데

화면에 표시가 안되네요. 

//item.vue
<template>
  <li>
    <slot name="kkk">
      <!-- NOTE: 등록하는 곳에서 정의할 화면 영역 -->
    </slot>
    <slot name="ddd"></slot>
  </li>
</template>
<script>
export default {};
</script>

//app.vue
<template>
  <div>
    <ul>
      <item slot="kkk">아이템 1</item>
      <item slot="kkk">
        아이템 2
        <button style="color:red">click</button>
      </item>
      <item slot="ddd">아이템 3</item>
      <item slot="ddd">아이템 4</item>
      <item slot="kkk">아이템 5</item>
    </ul>
  </div>
</template>

<script>
import Item from "./Item.vue";

export default {
  components: {
    Item
  }
};
</script>

<Item>
  <p slot="kkk">무언가</p>
</Item>