How do you fetch content where the object contains multiple levels in vue?

On my vue website that uses nuxt I have posts that contain categories. There are 4 sets of categories with 5 or 6 categories in each set. I am currently trying to create a page that fetches the posts with a specific category on it.

So for example I have

food.yml
cars.yml
math.yml
space.yml

And for example food would look like

food:
    - title: Tacos
      slug: tacos
      description: "A"
    - title: Burger
      slug: burger
      description: "B"
    - title: Chicken
      slug: chicken
      description: "C"
    - title: Pizza
      slug: pizza
      description: "D"
    - title: Artichokes
      slug: artichokes
      description: "E"
    - title: Cereal
      slug: cereal
      description: "F"

each post has this in its meta data to set the categories for the post

---
id: 999
title: 'YADA YADA YADA'
slug: yada-yada-yada
date: 'August 2nd, 2022'
img: Picture.png
categories:
    food:
        - Pizza
        - Chicken
        - Artichokes
---

Right now I do this to find the posts with a certain tag:

const posts2 = await this.$content('posts')
.where({ categories: { $contains: this.category } })
.sortBy('id', 'desc')
.fetch()
.catch();

However this only works if the meta data for the post is like

---
id: 999
title: 'YADA YADA YADA'
slug: yada-yada-yada
date: 'August 2nd, 2022'
img: Picture.png
categories:
    - Pizza
    - Chicken
    - Artichokes
---

How do I change the .where() function to allow me to section off the categories into sets?