Returning graphql nested nodes of belongsTo with Vue

Question

I'm not even sure if I'm going about this the right way. I'm using GraphQL with Gridsome. I want to display 1 recent post from each category.

This query is valid:

query ($page: Int) {
  allCategory(page: $page) {
    edges {
      node {
        title
        belongsTo(filter: {typeName: {eq: Blog}}, limit: 1) {
          edges {
            node {
              id
              ... on Blog {
                id
                title
              }
            }
          }
        }
      }
    }
  }
}

I'm trying to figure out the Vue syntax. This doesn't work except that it does return each category title:

<div v-for="edge in $page.allCategory.edges" :key="edge.node.id">
    <h2>
        {{ edge.node.title }}
    </h2>

    <div v-for="element in $page.allCategory.belongsTo.edges" :key="element.node.id">
        {{ element.node.title }}
    </div>

</div>