我无法更新图标组件Skycons

Question

我正在制作一个天气应用程序，其中我使用Darksky API来获取天气数据，并使用skycons来获取图标。我使用vue-skycon npm软件包。当应用程序首次启动或刷新页面时，它将显示正确的图标。但是，当我更改位置时，页面中的所有数据都已更改，但是skycons图标没有更改。

<template>
...
<skycon v-if="icon !== null" :condition="icon" />
...
</template>

<script> 
import axios from 'axios'

export default {
  name: 'home',
  data() {
    return{
      weather: {},
      temperature: NaN,
      icon: null,
      summery: 'Undefined',
      humidity: NaN,
      pressure: NaN,
      visibility: NaN,
      locationData: null,
      form: {
        location: ''
      },
      lat: null,
      lng: null,
      placename: 'Search or Give Location Access',
      placeData: {}
    }
  },
  methods: {
    async getWeatherData() {
      const response = await axios.get(...);
      ...
      const esponse = await axios.get(...);
      this.weather = esponse.data;
      ...
      this.icon = this.weather.currently.icon;
    },
    ...
  },
  mounted: async function() {
    const response = await axios.get(...);
    ...
    this.icon = this.weather.currently.icon
    ...
  }
}
</script>

已安装的函数图标正在工作，但是使用getWeatherData（）更新时，图标的值已更改，但dom上的图标未更改。