Show nested list using seperate component - vue.js

Question

I have my main page file called Scan.vue where I display a list with object. I don't know how many child objects a parent object has so I want to call another component called ScanList to display that info.
Scan:
<template>
<div>
<v-layout class="scanContainer">
<div class="scanSearch">
<input
type="text"
v-model="search"
placeholder="Rechercher une localisation :"
/>
</div>
<v-list>
<v-list-group
v-for="item in items"
v-bind:key="item"
v-model="item.active"
>
<v-list-tile slot="activator" #click="">
<v-list-tile-title>{{ item.title }}</v-list-tile-title>
</v-list-tile>
<ScanList></ScanList>
</v-list-group>
</v-list>
</v-layout>
</div>
</template>
<script>
import ScanList from "#/components/scan";
export default {
components: ScanList,
data: () => ({
items: [
{
id: 1,
title: "Location 1",
subItem: [
{
id: 1,
title: "Row 1",
qrCode: [
{ id: 1, title: "QR Code"}
]
},
{ id: 2, title: "Row 2" },
{ id: 3, title: "Row 3" },
{ id: 4, title: "Row 4" }
]
},
{
id: 2,
title: "Location 2",
subItem: [
{ id: 1, title: "Row 1" },
{
id: 2,
title: "Row 2",
qrCode: [
{ id: 2, title: "QR Code" }
]
},
{ id: 3, title: "Row 3" },
{ id: 4, title: "Row 4"}
]
}
]
}),
props: ["subItems"],
name: "Scan",
methods: {
showSelected(subItems) {
this.subItems = subItems;
this.items = true;
}
}
};
</script>
Here is the component I created called ScanList:
<template>
<v-list>
<v-list-group
v-for="subItem in item.subItem"
v-bind:key="subItem"
v-model="subItem.active"
>
<v-list-tile slot="activator" #click="">
<v-list-tile-title>{{ subItem.title }}</v-list-tile-title>
</v-list-tile>
<v-list
v-for="qrCode in subItem.qrCode"
v-bind:key="qrCode"
v-model="qrCode.active"
>
<v-list-tile>
<v-list-tile-title>{{ qrCode.title }}</v-list-tile-title>
</v-list-tile>
</v-list>
</v-list-group>
</v-list>
</template>
<script>
export default {
name: "ScanList"
};
</script>
Nothing is showing up and I'm not sure why. Thanks for taking a look.