Vue3 TypeError：无法读取未定义的属性（读取'main'）

我正在尝试在 Vite 中制作天气应用程序，但是当我运行程序时出现错误“TypeError：无法读取未定义的属性（读取'main'）”。以下是部分代码：

  <div id="app" :class="{warm: weather.main && weather.main.temp > 17}">

    <main>

      <div class="search-box">

        <input type="text" class="search-bar" placeholder="Search..." v-model="query" @keypress="fetchWeather" />

      </div>

      <div class="weather-wrap" v-if="typeof weather.main != 'undefined'">

        <div class="location-box">

          <div class="location">

            {{ weather.name }}, {{ weather.sys.country }}

          </div>

          <div class="date">

            {{ dateBuilder() }}

          </div>

        </div>

        <div class="weather-box">

          <div class="temp">

            {{ Math.round(weather.main.temp) }}°c

          </div>

          <div class="weather">{{ weather.weather[0].main }}</div>

        </div>

      </div>

    </main>

  </div>

这是我的 js

export default {

  name: "app",

  date() {

    return {

      api_key: '803a7cd7089cd54e3ecc37bf1b6a3340',

      url_base: 'https://api.openweathermap.org/data/2.5/',

      query: 'Taiwan',

      weather: {

        main: {

          temp: 17

        }

      },

    }