title: Dynamically data doesn't update when changing v-model input value in Vuejs
body: <p>I am building a weather app with this <a href="https://openweathermap.org/current" rel="nofollow noreferrer">Weather API</a>. I am trying to add an <code>&lt;input&gt;</code> field value that when  it changes the city name, then updates the other values forecast.</p>
  <p>I have created the <code>&lt;input&gt;</code> field which updates the city value &amp; it should update the weather forecast accordingly. I know the <code>v-model</code> is working, however it doesn't change the data results. Only when I hard-code a different city in the <code>Vue-instance</code> the data updates the changes.</p>
  <pre><code>&lt;template&gt;
    &lt;div class=&quot;home&quot;&gt;
      &lt;h1&gt;{{ msg }}&lt;/h1&gt;
      &lt;p&gt;A weather app built Vuejs &amp; Open Weather App. Made by Manuel Abascal&lt;/p&gt;
      &lt;input type=&quot;text&quot; v-model.lazy=&quot;currentWeather.name&quot;&gt;
      &lt;div class=&quot;forecast&quot;&gt;
       &lt;div v-if=&quot;this.currentWeather&quot;&gt;
        &lt;!-- Forecast stat values --&gt;
        &lt;h2&gt;Right now:&lt;/h2&gt;
        &lt;div&gt;&lt;strong&gt;City:&lt;/strong&gt; {{ currentCity }}&lt;/div&gt;
        &lt;div&gt;&lt;strong&gt;Longitude: &lt;/strong&gt; {{ currentWeather.coord.lon }}&lt;/div&gt;
        &lt;div&gt;&lt;strong&gt;Latitude: &lt;/strong&gt; {{ currentWeather.coord.lat }}&lt;/div&gt;
        &lt;div&gt;&lt;strong&gt;Weather condition &lt;/strong&gt; {{ currentWeather.weather[0].description }}&lt;/div&gt;
        &lt;div&gt;&lt;strong&gt;Temperature Mid: &lt;/strong&gt; {{  currentWeather.main.temp }} Farenheit&lt;/div&gt;
        &lt;div&gt;&lt;strong&gt;Temperature Max: &lt;/strong&gt; {{  currentWeather.main.temp_max}} Farenheit&lt;/div&gt;
        &lt;div&gt;&lt;strong&gt;Temperature Min: &lt;/strong&gt; {{  currentWeather.main.temp_min}} Farenheit&lt;/div&gt;
        &lt;div&gt;&lt;strong&gt;Humidity: &lt;/strong&gt; {{  currentWeather.main.humidity }}%&lt;/div&gt;
        &lt;div&gt;&lt;strong&gt;Wind: &lt;/strong&gt; {{  currentWeather.wind.speed }} mph&lt;/div&gt;
       &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  // import Axios
  import axios from &quot;axios&quot;
  
  export default {
    name: &quot;Home&quot;,
    props: {
      msg: String,
    },
    data(){
      return {
        // current weather
        currentWeather: null,
        // current city
        currentCity: 'Montreal',
        // current country
        currentCountry: 'ca',
        unit: 'imperial'
      }
      this.$set(this.currentCity);
    },
    mounted(){
      // Make axios request to open weather api
      axios.get('https://api.openweathermap.org/data/2.5/weather?q='+this.currentCity+','+this.currentCountry+'&amp;appid=fe435501a7f0d2f2172ccf5f139248f7&amp;units='+this.unit+'')
      .then((response) =&gt; {
          // takes response object &amp; stores it in currentWeather
          this.currentWeather = response.data
  
      })
      .catch(function (error) {
          // handle error
          console.log(error);
      })
    }
  };
  &lt;/script&gt;
  
  &lt;style scoped lang=&quot;scss&quot;&gt;
  
  &lt;/style&gt;
  </code></pre>
  <p>I am trying when I change to cities like Montreal, Toronto, Ottawa, Alberta, etc..it changes the forecast accordingly.</p>