Sending props from reusable component for navigation drawer

I have created two components, Comp-A(reusable component) and Comp-B. and in Component B i used Component A and send props to A for navigation drawer .while sending props it is listing only the last prop .But i need to list all the props which i send. Can you please help me with this.

CompA(reusable)

<template>
 <v-navigation-drawer v-model="drawer">
        <v-list>
          <v-list-item :key="item.title">
            <v-list-item-icon>
              <v-icon>{{ item.icon }}</v-icon>
            </v-list-item-icon>
           <v-list-item-content>
              <v-list-item-title>{{ item.title }}</v-list-item-title>
            </v-list-item-content>
          </v-list-item>
        </v-list>
      </v-navigation-drawer>
</template>
<script>
   export default{
     props:{
        item:{
         type:Object,
         default()=>{
             title:'',
             icon:'', 
           }
        }
     }
  }
</script>

CompB

 <template>
       <div>
          <CompA :item="{title:'Dashboard',icon:'board'}"></CompA>
          <CompA :item="{title:'Cars',icon:'car'}"></CompA>
          <CompA :item="{title:'Contact Details',icon:'phone'}"></CompA>
       </div>
    </template>

Note: But it is only displaying only one title in navigation drawer that is "Contact Details".How can i display the remaining two??