<h3 dir="auto">Version</h3>
<p dir="auto">2.6.10</p>
<h3 dir="auto">Reproduction link</h3>
<p dir="auto"><a href="https://codepen.io/meekohi/pen/jjgezj" rel="nofollow">https://codepen.io/meekohi/pen/jjgezj</a></p>
<h3 dir="auto">Steps to reproduce</h3>
<p dir="auto">Use <code class="notranslate">@click.prevent=</code> along with a <code class="notranslate">:checked='booleanComponentProp'</code> on a checkbox. Clicking the checkbox correctly updates all data, but the checkbox visually remains in whatever the original state was.</p>
<h3 dir="auto">What is expected?</h3>
<p dir="auto">Checkbox should update based on the <code class="notranslate">:checked</code> property.</p>
<h3 dir="auto">What is actually happening?</h3>
<p dir="auto">Checkbox does not update.</p>
<hr>
<p dir="auto">This bug did not exist in Vue 2.5.22 -- it seems like Vue 2.6 started relying on the native <code class="notranslate">click</code> event to change the state of the box for the simple case, but if the underlying property changes via some other mechanism (for example a prop updating) then the checkbox visual appearance gets out of sync with the underlying data.</p>
<h3 dir="auto">Version</h3>
<p dir="auto">2.6.6</p>
<h3 dir="auto">Reproduction link</h3>
<p dir="auto"><a href="https://jsfiddle.net/s4ub8dnc/3/" rel="nofollow">https://jsfiddle.net/s4ub8dnc/3/</a></p>
<h3 dir="auto">Steps to reproduce</h3>
<p dir="auto">I have a checkbox which needs to get it's checked state from a VueX store, but I also need to be able to determine whether or not shift was being held when the checkbox was clicked.  To do this I'm using <code class="notranslate">@click.prevent</code> on the checkbox (so that I have the event being passed to the method) and then using <code class="notranslate">v-model</code> to determine the checked state.</p>
<p dir="auto">However, regardless of whether or not the <code class="notranslate">v-model</code> value is true or false, the checkbox never gains the checked state if the click is prevented.  It seems that there is still a reliance on the click event in order to set the state.</p>
<h3 dir="auto">What is expected?</h3>
<p dir="auto">I would expect the checkbox to be checked if the <code class="notranslate">v-model</code> value is set to <code class="notranslate">true</code>, regardless of how the checkbox arrived at that state - by something else setting it to true, or by the click handler setting it.</p>
<h3 dir="auto">What is actually happening?</h3>
<p dir="auto">The click binding having <code class="notranslate">.prevent</code> on it stops the checkbox from receiving it's checked state, even when the <code class="notranslate">v-model</code> value is true</p>
<hr>
<p dir="auto">The reason why I haven't just used a setter in the computed is because the setter doesn't get given the click event, so I can determine whether or not shift was being held at the point of clicking the checkbox.</p>