Nuxt 3 API call with data from another API call

I am building a weather forecast app and to get data for a specific city I have a dynamic URL (/forecast/[id]) with the city id from open-meteo. To get the actual lat and lon I want to make an API call to the open-meteo geocoding API to then use the retrieved lat and lon and timezone to make another request to the open-meteo forecast API. But unfortunately I was unable to make it work.

here is my current code:

<script setup>
const route = useRoute()
const id = route.params.id
const lat = ref(null)
const lon = ref(null)
const timezone = ref("")

const {data: locationdata} = await useAsyncData("geocode", () =>
  $fetch(`https://geocoding-api.open-meteo.com/v1/get?id=${id}`)
).then((res) => {
  lat.value = res.data.value.latitude
  lon.value = res.data.value.longitude
  timezone.value = res.data.value.timezone
})


const { data: weatherdata, pending } = await useAsyncData("weatherdata", () =>
  $fetch(`https://api.open-meteo.com/v1/forecast?latitude=${lat}&longitude=${lon}&hourly=temperature_2m,relativehumidity_2m,surface_pressure,precipitation,weathercode,windspeed_10m,winddirection_10m,windgusts_10m&current_weather=true&windspeed_unit=kn&timezone=${timezone}`)
).catch((e) => {
  console.log(e)
})
</script>
<template>
<pre><code>{{weatherdata}}</code></pre>
</template>

and this is the error I am getting in the terminal:

[nuxt] [request error] Cannot destructure property 'data' of '((intermediate value)__vite_ssr_import_2__.withAsyncContext(...) , (intermediate value)(intermediate value) , __restore(...) , __temp)' as it is undefined.
  at setup (./.nuxt/dist/server/server.mjs:4338:14)  
  at processTicksAndRejections (node:internal/process/task_queues:96:5)

Note: On another endpoint I am getting the lat and lon from the URL itself (without the first API call) and it works totally fine. Your can actually check out out yourself here

here is the code from the other endpoint which works

<script setup>
const route = useRoute()

const lat = route.params.lat
const long = route.params.long
const name = route.query.name
const url  = 'https://api.open-meteo.com/v1/forecast?latitude=' + lat + '&longitude=' + long + '&hourly=temperature_2m,relativehumidity_2m,surface_pressure,precipitation,weathercode,windspeed_10m,winddirection_10m,windgusts_10m&current_weather=true&windspeed_unit=kn'
const { data: weatherdata, refresh } = await useFetch(url)
</script>