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>