How to access subfolders using nuxt content module?

#nuxt #vue #help

I am currently using this module for my blog and as it is a blog folder with a series of blog posts these render fine, however I'm also attempting to use it to display some documentation which inckude subfolders. I have a docs folder with index.vue with code as follows:

<ul class="mx-auto lg:w-1/2">
   <li class="p-5" v-for="doc in docs" :key="doc.id">
      <nuxt-link :to="{ name: 'docs-slug', params: { slug: doc.slug } }">
      <h2 class="py-4 text-white">{{ doc.title }}</h2>
     </nuxt-link>
   </li>
 </ul>

async asyncData({ $content, params }) {
    const docs = await $content('mydocs', { deep: true }, params.slug).fetch()

        return {
            docs
        }
    }

Now this renders the title of all the pages inside mydocs folder correctly, however, when clicking on one it does not load the corresponding content and I am not sure what I am doing wrong. (If the files are in the base 'docs' folder they render fine)

And in my _slug.vue file I have this:

async asyncData({ $content, params }){
  const docs = await $content('mydocs', { deep: true }, params.slug).fetch()

  return {
    docs
  }
},

For example, I click the Vue title and it tries to load /docs/vue/ when the path is actually docs/js/vue ? I thought using { deep: true } would solve this as the docs it says this will fetch files from subdirectories so how do I set the path? Am I missing something? Anyone come across the same issue?

Any help much appreciated as I'm not sure what I'm doing wrong/.