Vuexfire get values from nested object in an array

Question

I have this shoppingLists array with 2 shopping list in it.

https://i.stack.imgur.com/kHSd0.png

I'd like to show these shopping lists like this:

https://i.stack.imgur.com/Cmc8K.png

How can I do that?

I use vuexFire, firebase and vue.

Thanks a lot.

import {
    ...
  } from 'quasar';


  export default {
    data() {
      return {

      };
    },
    created() {
      this.$store.dispatch('setShoppingListsRef');
      this.$store.dispatch('setFirstListRef');
      this.$store.dispatch('setSecondListRef');
    },
    computed: {
      shoppingLists() {
        return this.$store.state.shoppingLists;
      },
      shoppingListsRef() {
        return this.$store.state.shoppingListsRef;
      },
      firstListRef() {
        return this.$store.state.firstShoppingListRef;
      },
      secondListRef() {
        return this.$store.state.secondShoppingListRef;
      },
    },
    components: {
      ...
    },
  };

  <div>
    <h6 class="on-right">
      Bevásárló listá(i)m
    </h6>

    <div class="row justify-center">
      <q-card inline class="notes" v-for="shoppingList in this.shoppingLists">
        <q-card-title>
          {{ shoppingList['.key'] }}
        </q-card-title>
        <q-card-main class="row justify-start items">
          <q-list>
            <q-item>
              <q-icon name="shopping basket" />
              <span class="on-right" >-- i want shopping list items here --</span>
            </q-item>
          </q-list>
        </q-card-main>
      </q-card>
    </div>
  </div>