<h3 dir="auto">Vue.js version</h3>
<p dir="auto">2.0.2</p>
<h3 dir="auto">Reproduction Link</h3>
<p dir="auto"><a href="http://jsfiddle.net/df4Lnuw6/100/" rel="nofollow">http://jsfiddle.net/df4Lnuw6/100/</a></p>
<h3 dir="auto">Steps to reproduce</h3>
<p dir="auto">Click on set user department, then click on set departments.</p>
<h3 dir="auto">What is Expected?</h3>
<p dir="auto"><code class="notranslate">data.form.department_id</code> = <code class="notranslate">2</code></p>
<h3 dir="auto">What is actually happening?</h3>
<p dir="auto"><code class="notranslate">data.form.department_id</code> = <code class="notranslate">null</code></p>
<p dir="auto">Let's say we have a variable called someVar in our component - it is properly defined and its initial value is 1:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="...
data: {
    someVar: 1
}
..."><pre class="notranslate"><code class="notranslate">...
data: {
    someVar: 1
}
...
</code></pre></div>
<p dir="auto">In our template there is a select tag with 3 options bound to someVar with v-model:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;select v-model=&quot;someVar&quot;&gt;
    &lt;option value=&quot;1&quot;&gt;Option 1&lt;/option&gt;
    &lt;option value=&quot;3&quot;&gt;Option 3&lt;/option&gt;
    &lt;option value=&quot;5&quot;&gt;Option 5&lt;/option&gt;
&lt;/select&gt;"><pre class="notranslate"><code class="notranslate">&lt;select v-model="someVar"&gt;
    &lt;option value="1"&gt;Option 1&lt;/option&gt;
    &lt;option value="3"&gt;Option 3&lt;/option&gt;
    &lt;option value="5"&gt;Option 5&lt;/option&gt;
&lt;/select&gt;
</code></pre></div>
<p dir="auto">At this point everything works as expected. However, if we then change the value of someVar to a value that is not covered by any of the option tags (2 in this example), v-model will set someVar to undefined instead:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="...
created: function() {
  setTimeout(function(){
    this.someVar = 2;
    // this.someVar becomes undefined instead
  }.bind(this), 2000);
}
..."><pre class="notranslate"><code class="notranslate">...
created: function() {
  setTimeout(function(){
    this.someVar = 2;
    // this.someVar becomes undefined instead
  }.bind(this), 2000);
}
...
</code></pre></div>
<p dir="auto">Here is a jsfiddle showing the issue:<br>
<a href="https://jsfiddle.net/0vpqny9y/4/" rel="nofollow">https://jsfiddle.net/0vpqny9y/4/</a></p>
<p dir="auto">What I expected to happen was that the value is set properly and the select tag becomes empty.</p>
<p dir="auto">While the setTimeout example may be silly, where it's becoming a pain to me is when I load both the options and the model that has a property bound to the select at the same time, which results in a race condition:</p>
<ol dir="auto">
<li>Options load first, model loads second, the option is present so everything works fine.</li>
<li>Model loads first, the bound value is set to whatever was loaded through AJAX, but since there are no options yet the value is instead set to undefined, then the options load by this time the original value is lost</li>
</ol>