<h3 dir="auto">Version</h3>
<p dir="auto">2.6.0</p>
<h3 dir="auto">Reproduction link</h3>
<p dir="auto"><a href="https://jsfiddle.net/goblinlord/k64bx8gp/9/" rel="nofollow">https://jsfiddle.net/goblinlord/k64bx8gp/9/</a></p>
<h3 dir="auto">Steps to reproduce</h3>
<ol dir="auto">
<li>Create an element with <code class="notranslate">type</code> attribute set to either <code class="notranslate">checkbox</code> or <code class="notranslate">radio</code>.</li>
<li>Call <code class="notranslate">preventDefault</code> on the <code class="notranslate">click</code> event (or just set <code class="notranslate">@click.prevent</code>)</li>
<li>Set the <code class="notranslate">checked</code> value synchronously to a different value</li>
</ol>
<h3 dir="auto">What is expected?</h3>
<p dir="auto">New value that is set should be reflected in the rendered markup.</p>
<h3 dir="auto">What is actually happening?</h3>
<p dir="auto">The result of the value changing is not reflected in the in the rendered state even though the value is actually changed based on what is shown in Vue dev tools.</p>
<hr>
<p dir="auto">This worked prior to <code class="notranslate">2.6.0</code> and I can not find any documentation indicating the behavior changed or why it would change.  In the reproduction link you can comment out the <code class="notranslate">2.6.0</code> version and uncomment the line above it with <code class="notranslate">2.5.22</code>.  On <code class="notranslate">2.5.22</code> it works as expected.</p>
<p dir="auto">I have been using this previously when wrapping an input with a styled alternative with additional markup/styling.  The purpose of having <code class="notranslate">preventDefault</code> is to allow the decision of the value change to be made in a location other than the checkbox itself.  For example, we could easily display a dialog box when the user clicks this and then when it is closed set the state based on the response.  Removing <code class="notranslate">preventDefault</code> causes the checkbox to toggle.  If this happens but we want to wait until a later time to set the state, the desired state is not reflected properly until that time.  Some cases, no async work is done and it is desirable to change state immediately.  In those cases, a simple <code class="notranslate">v-model</code> can be used with the same exact component.</p>
<p dir="auto">A dialog box is just one example, I also have cases where there is an network call before the actual state is changed.  (one style is a toggle slider for example but i have other styled inputs as well)</p>
<h3 dir="auto">Version</h3>
<p dir="auto">2.6.10</p>
<h3 dir="auto">Reproduction link</h3>
<p dir="auto"><a href="https://jsfiddle.net/skav/moks07y2/4/" rel="nofollow">https://jsfiddle.net/skav/moks07y2/4/</a></p>
<h3 dir="auto">Steps to reproduce</h3>
<p dir="auto">Check a checkbox</p>
<h3 dir="auto">What is expected?</h3>
<p dir="auto">Label and attribute are the same as state</p>
<h3 dir="auto">What is actually happening?</h3>
<p dir="auto">Label is the same as actual state, but checked attribute doesnt change at all</p>
<hr>
<p dir="auto">It works perfectly on 2.5.x versions, but brokes in 2.6.x (and below 2.5)</p>