<h3 dir="auto">Version</h3>
<p dir="auto">2.6.4</p>
<h3 dir="auto">Reproduction link</h3>
<p dir="auto"><a href="https://jsfiddle.net/mu4q63db/1/" rel="nofollow">https://jsfiddle.net/mu4q63db/1/</a></p>
<h3 dir="auto">Steps to reproduce</h3>
<ol dir="auto">
<li>Select a period radio button</li>
<li>Hit Monthly and Daily back and forth</li>
<li>Sometimes maybe select a period radio button again</li>
</ol>
<h3 dir="auto">What is expected?</h3>
<p dir="auto">the v-model for period should always select a radio button when being rendered</p>
<h3 dir="auto">What is actually happening?</h3>
<p dir="auto">Sometimes, no radio button will be selected even when the corresponding v-model variable (period_month) still has its previous value.</p>
<hr>
<p dir="auto">This is reproducible, but sometimes it can take a few clicks to get it to happen.</p>
<h3 dir="auto">Vue.js version</h3>
<p dir="auto">Most recent</p>
<h3 dir="auto">Reproduction Link</h3>
<p dir="auto"><a href="https://jsfiddle.net/mo48q36L/" rel="nofollow">https://jsfiddle.net/mo48q36L/</a></p>
<p dir="auto">Each custom select element has a togglable option to represent an option that might change in real-world conditions. I want to prevent the value in vue and the value in the select element from being out of sync.</p>
<p dir="auto">To do this, I compare the value of the select element and the value in vue in the <code class="notranslate">updated</code> lifecycle hook. If they're not equal, that means that the corresponding option no longer exists, so I want to simply set the value of both to be null.</p>
<h3 dir="auto">Steps to reproduce</h3>
<p dir="auto">Click the "Toggle option" buttons below each custom select element, which will remove the currently selected element.</p>
<p dir="auto">The top element (custom-select) does emit the null value, but the dom isn't updated until something else triggers a dom update. If vue devtools worked on jsfiddle, you would also be able to notice that the corresponding data value in the parent component is immediately updated after emitting null, but the value prop in the child component is not updated until the dom updates.</p>
<p dir="auto">The bottom element (custom-select-next-tick) emits the null value in <code class="notranslate">$nextTick</code>, and the dom is updated in the next tick as it should be.</p>
<h3 dir="auto">What is Expected?</h3>
<p dir="auto">I expect that emitting a new value in <code class="notranslate">updated</code> should trigger a new dom update.</p>
<p dir="auto">The docs suggest that the dom will be updated by manipulating state in <code class="notranslate">updated</code>: <a href="https://vuejs.org/v2/api/#updated" rel="nofollow">https://vuejs.org/v2/api/#updated</a></p>
<h3 dir="auto">What is actually happening?</h3>
<p dir="auto">Emitting a new value in <code class="notranslate">updated</code> is not triggering a dom update or v-model <code class="notranslate">value</code> change unless it's wrapped in <code class="notranslate">$nextTick</code>.</p>
<p dir="auto">Thank you!</p>