title: How set the selected option on a dynamic loaded secondary select with VueJS?
body: <p>I have a city select:</p>
  
  <pre><code>&lt;select v-model="city"&gt;
      &lt;option value="" selected&gt;CIDADE AONDE VOCÊ ESTUDA&lt;/option&gt;
      &lt;option value="city1"&gt;City 1&lt;/option&gt;
      &lt;option value="city2"&gt;City 2&lt;/option&gt;
      &lt;option value="cityx"&gt;City x&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>And a a school select:</p>
  
  <pre><code>&lt;select v-model="school"&gt;
      &lt;option
          v-for="item in schools"
          v-bind:value="item.name"
          v-bind:selected="school == item.name"
      &gt;
          @{{ item.name }}
      &lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>This is the data (filled by a Laravel Blade view), which may or may not come with a city and a school:</p>
  
  <pre><code>data: {
      ...
      city: '{{ Input::old('city') }}',
      school: '{{ Input::old('school') }}',
      schools: [],
  },
  </code></pre>
  
  <p>I also have a watch on city:</p>
  
  <pre><code>watch: {
      'city': '__cityChanged',
  },
  </code></pre>
  
  <p>This is the event handler:</p>
  
  <pre><code>__cityChanged: function (event)
  {
      this.school = '';
  
      this.__fetchSchools();
  },
  </code></pre>
  
  <p>And the fetcher:</p>
  
  <pre><code>__fetchSchools: function (event)
  {
      if (this.city)
      {
          this.$http.get('/schools/' + this.city, function (schools)
          {
              this.schools = schools;
          });
      }
  },
  </code></pre>
  
  <p>Almost everything works fine, the only problem is, when the form is reloaded (or redirected back on a failed validation) and city and a school are already selected, it does call the <code>__fetchSchools</code> and fill up the schools select correctly, but it does not set the school selected option, so what the user sees is the school unselected.</p>
  
  <p>Is there a way to make it work using Vue?</p>