Nuxt 3 runtimeConfig returns undefined

I am using runtimeConfig on a page but it is undefined

In nuxt.config.ts

  runtimeConfig: {
    public: {
      apiUrl: process.env.API_URL,
      local: {
        client_id: 'id goes here',
        client_secret: 'ueyqwriwyriry'
      }
    }
  }

In my page index.vue

const config = useRuntimeConfig();

console.log(config.public.local.client_id); // undefined
console.log(config.public.apiUrl) //undefined

When I use the nuxt docs basic example, it works, but if I add an extra variable, both are undefined.

runtimeConfig: {
  // Private keys are only available on the server
  apiSecret: '123',
  // Public keys that are exposed to the client
  public: {
    apiBase: '/api'
  }
}

in index.vue => console.log(config.public.apiBase) // works 

runtimeConfig: {
  // Private keys are only available on the server
  apiSecret: '123',
  // Public keys that are exposed to the client
  public: {
    apiBase: '/api',
    anotherKey: 'test',
  }
}

in index.vue => console.log(config.public.apiBase) // undefined 
console.log(config.public.anotherKey) // undefined