Reading nested directory with ContentNavigation component nuxt3 - vue.js

Question

My content folder has one directory called planets, which contains yaml files of different planets.
I want to render the planet pages as navigation items content navigation component
Currently i only get a link to the /planets page, so Im figuring that the component is reading the root content directory but I need to give it the /planets to read that instead.
In my index.vue file I have written this as per docs:
<nav>
<ContentNavigation v-slot="{ navigation }" :query="queryPlanets" >
<div v-for="link of navigation" :key="link._path">
<NuxtLink :to="link._path">{{ link.title }}</NuxtLink>
</div>
</ContentNavigation>
</nav>
<script setup>
const queryPlanets = queryContent('planets')
</script>
But I keep getting this vue router warn error:
[Vue Router warn]: No match found for location with path "/planets"
I have tried using the following:
const query = queryContent({
where: {
_path: { $contains: '/planets' }
}
})
Gives same error,
I have also tried to track the files down manually
const query = await useAsyncData('planets', () => queryContent('/planets').find('/'));
And I do find the files with the right paths and all the values.
So I believe this is some sort of vue router error, but
I am unsure how to debug this exactly.
I am using Nuxt3

Answer 1

Turns out when calling <ContentNavigation v-slot="{ navigation }" > you get everything including contents of nested directories.
So the navigation returns an object and then I can just write them out as follows:
<div v-for="dir in navigation" :key="dir._path" >
<div v-for="link in dir.children" :key="link._path">
<NuxtLink :to="link._path">
{{ link.title }}
</NuxtLink>
</div>
</div>