Vue Невозможно прочитать свойства неопределенного значения (чтение «0»)

Попытка динамически отображать информацию о погоде из API. Запрос API возвращает данные, которые я могу отобразить в журнале и на странице. Однако, когда я пытаюсь отобразить отдельные элементы в массивах ответов, веб-консоль сообщает, что не может прочитать свойства undef (чтение «0»). Вся страница прекратит рендеринг.

Код

<script>
import axios from 'axios'

export default{
  data() {
    return {
      weather: []
    };
  },
  async created(){
    try{
      const response = await axios.get('apilinkredacted');
      this.weather = response.data.daily;
      console.info(this.weather)
    } catch (error) {
      console.error(error);
    }
  }
}
</script>

<template>
  <main>
    <div v-for = "n in 4" class = "text-cliPurple border-t border-windowOutline pb-2 pl-2">

      <!-- weather.daily.temperature_2m_max[n-1] -->
      <p class = "underline">{{ weather.time[n-1] }}</p>

    <div class = "grid grid-cols-2">
      <div class = "">
        <pre>
     \   /
      .-.
   ― (   ) ―
      `-’
     /   \
        </pre>
      </div>
      <div class = "text-left">
        <p><span class = "text-cliOrange">Temp:</span> {{ weather.temperature_2m_max[n-1] }} C</p>
        <p><span class = "text-titleColor">Rain Chance:</span> {{ weather.precipitation_probability_max[n-1] }}%</p>
        <p><span class = "text-userColor">Rain Amount:</span> {{ weather.rain_sum[n-1] }}mm</p>
        <p><span class = "text-cliRed">UV:</span> {{ weather.uv_index_max[n-1] }}</p>

      </div>
    </div>
  </div>
  </main>
</template>

JSON-ответ

{
    "latitude": -35.25,
    "longitude": 149.125,
    "generationtime_ms": 0.06699562072753906,
    "utc_offset_seconds": 36000,
    "timezone": "Australia/Sydney",
    "timezone_abbreviation": "AEST",
    "elevation": 568,
    "daily_units": {
        "time": "iso8601",
        "temperature_2m_max": "°C",
        "apparent_temperature_max": "°C",
        "uv_index_max": "",
        "rain_sum": "mm",
        "precipitation_probability_max": "%"
    },
    "daily": {
        "time": [
            "2024-05-09",
            "2024-05-10",
            "2024-05-11",
            "2024-05-12",
            "2024-05-13",
            "2024-05-14",
            "2024-05-15"
        ],
        "temperature_2m_max": [
            16.5,
            14.9,
            13.1,
            13.4,
            17.5,
            15.9,
            14.7
        ],
        "apparent_temperature_max": [
            14.4,
            13.2,
            11.4,
            11.1,
            16,
            14.6,
            13.8
        ],
        "uv_index_max": [
            1.95,
            2.55,
            0.6,
            3.9,
            4.2,
            3.95,
            3.65
        ],
        "rain_sum": [
            0,
            5.1,
            26.5,
            3.7,
            0,
            0,
            0
        ],
        "precipitation_probability_max": [
            52,
            74,
            90,
            37,
            0,
            0,
            3
        ]
    }
}

Сначала я думал, что это потому, что этот элемент не был массивом, но когда я использовал console.info(this.weather.time[0]), я получаю правильные данные, напечатанные в веб-консоли. Если я не укажу конкретные элементы, я могу визуализировать весь ответ несколько раз, но когда я добавляю детали и перезагружаю, вся страница становится пустой.

Кроме того, когда я получаю запрос на сохранение отдельного массива this.weather = response.data.daily.time;, я могу обратиться к отдельным элементам с помощью weather[0], и это не вызывает никаких проблем.