Почему появляется ошибка Openweather API?

Почему в {{weather.city}} нормально отображается весь объект, а если написать {{weather.city.name}} появляется ошибка:

Uncaught TypeError: Cannot read properties of undefined (reading 'name')

<template>
  <main class="main">
    <div class="wrapper">
      <form @submit.prevent="getWeather" class="form">
        <input v-model="search" type="text">
      </form>
      <p>{{weather.city}}</p>
      <div class="list">
        <div class="list__item" v-for="(elem, index) in weather.list" :key="index">
          <p>{{weather.list[index].weather[0].description}}</p>
          <p>{{Math.floor(weather.list[index].main.temp)}}°</p>
          <p>{{Math.floor(weather.list[index].main.humidity)}}%</p>
          <p>{{weather.list[index].main.pressure}}hPa</p>
          <p>{{weather.list[index].wind.speed}}Km/H</p>
        </div>
      </div>
    </div>
  </main>
</template>

<script>
export default {
  name: 'App',
  components: {},
  data() {
    return {
      search: "",
      lat: "",
      lon: "",
      api_key: "",
      data: [],
      weather: {},
    }
  },
  methods: {
    async getWeather() {
        const responseGeo = await fetch(`https://api.openweathermap.org/geo/1.0/direct?q=${this.search}&limit=1&appid=${this.api_key}`)
        const resultGeo = await responseGeo.json()
        this.lat = resultGeo[0].lat
        this.lon = resultGeo[0].lon
        const response = await fetch(`https://api.openweathermap.org/data/2.5/forecast?lat=${this.lat}&lon=${this.lon}&appid=${this.api_key}&units=metric`)
        const result = await response.json()
        this.weather = result
        this.search = ""
        console.log(this.weather)
    }
  },
}
</script>

https://i.stack.imgur.com/4YYYo.png