Cannot read properties of undefined (reading ...) Apollo + GraphQL + Vue 3

I'm having some trouble accessing data from my GraphQL query.

This is the situation.

In my MenuList.vue when I try to access menu.menuItems.nodes I receive the error

Cannot read properties of undefined (reading 'nodes')

But if I try to access menu.menuItems it works...

Have you any idea why this is happening?

main.js

import { createApp, provide, h } from "vue";
import { ApolloClient, HttpLink, InMemoryCache } from "@apollo/client/core";
import { createApolloProvider } from "@vue/apollo-option";
import App from "./App.vue";

const httpLink = new HttpLink({
  uri: "http://XXX.XXX.XXX.XXX/graphql",
});

// Create the apollo client
const apolloClient = new ApolloClient({
  link: httpLink,
  cache: new InMemoryCache(),
  connectToDevTools: true,
});

// Create a provider
const apolloProvider = createApolloProvider({
  defaultClient: apolloClient,
});

const app = createApp({
  render: () => h(App),
});

app.use(apolloProvider);
app.mount("#app");

graphql.js

import gql from "graphql-tag";

export const MENU_QUERY = gql`
  query MENU_QUERY {
    menu(id: "MainMenu", idType: NAME) {
      count
      id
      databaseId
      name
      slug
      menuItems {
        nodes {
          id
          databaseId
          title
          url
          uri
          cssClasses
          description
          label
          linkRelationship
          target
          parentId
        }
      }
    }
  }
`;

App.vue

<template>
  <div id="app">
    <nav class="navbar is-primary" role="navigation" aria-label="main navigation">
      <div class="container">
        <div class="navbar-brand">
          <menu-list></menu-list>
        </div>
      </div>
    </nav>
    <router-view/>
  </div>
</template>

<script>
import MenuList from './components/MenuList'
export default {
  name: 'App',
  components: {
    MenuList
  }
}
</script>

MenuList.vue

<template>
  <div>
    MENU LIST
    <h4 v-if="loading">Loading...</h4>
    {{menu.menuItems.nodes}}
  </div>
</template>

<script>
import { MENU_QUERY } from "@/graphql";

export default {
  name: "MenuList",
  data() {
    return {
      menu: [],
      loading: 0,
    };
  },
  apollo: {
    menu: {
      query: MENU_QUERY,
    },
  },
};
</script>

Data returned by GraphQL

{
   "__typename":"Menu",
   "count":2,
   "id":"dGVybToz",
   "databaseId":3,
   "name":"MainMenu",
   "slug":"mainmenu",
   "menuItems":{
      "__typename":"MenuToMenuItemConnection",
      "nodes":[
         {
            "__typename":"MenuItem",
            "id":"cG9zdDo2",
            "databaseId":6,
            "title":null,
            "url":"http://XXX/page-3/",
            "uri":"/page-3/",
            "cssClasses":[
               
            ],
            "description":null,
            "label":"Page 3",
            "linkRelationship":null,
            "target":null,
            "parentId":null
         },
         {
            "__typename":"MenuItem",
            "id":"cG9zdDoxMA==",
            "databaseId":10,
            "title":null,
            "url":"http://XXX/page-2/",
            "uri":"/page-2/",
            "cssClasses":[
               
            ],
            "description":null,
            "label":"Page 2",
            "linkRelationship":null,
            "target":null,
            "parentId":null
         }
      ]
   }
}