<p dir="auto">Seems fixing the bug from <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="196589497" data-permission-text="Title is private" data-url="https://github.com/vuejs/vue/issues/4521" data-hovercard-type="issue" data-hovercard-url="/vuejs/vue/issues/4521/hovercard" href="https://github.com/vuejs/vue/issues/4521">#4521</a> created a new bug for :checked="" binding when using in combination with vuex states for maintaining checkbox states.</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;template&gt;
	&lt;ul&gt;
		&lt;li v-for=&quot;option in visibleOptions&quot; :key=&quot;option.value&quot;&gt;
			&lt;input
				type=&quot;checkbox&quot;
				:name=&quot;filter.key&quot;
				:value=&quot;option.value&quot;
				:checked=&quot;inArray(option.value, filter.active)&quot;
				@change=&quot;updateFilter&quot;&gt;
		&lt;/li&gt;
	&lt;/ul&gt;
&lt;/template&gt;"><pre class="notranslate"><span class="pl-c1">&lt;</span><span class="pl-ent">template</span><span class="pl-c1">&gt;</span>
	<span class="pl-c1">&lt;</span><span class="pl-ent">ul</span><span class="pl-c1">&gt;</span>
		<span class="pl-c1">&lt;</span><span class="pl-ent">li</span> <span class="pl-c1">v-for</span><span class="pl-c1">=</span><span class="pl-s">"option in visibleOptions"</span> :<span class="pl-c1">key</span><span class="pl-c1">=</span><span class="pl-s">"option.value"</span><span class="pl-c1">&gt;</span>
			<span class="pl-c1">&lt;</span><span class="pl-ent">input</span>
				<span class="pl-c1">type</span><span class="pl-c1">=</span><span class="pl-s">"checkbox"</span>
				:<span class="pl-c1">name</span><span class="pl-c1">=</span><span class="pl-s">"filter.key"</span>
				:<span class="pl-c1">value</span><span class="pl-c1">=</span><span class="pl-s">"option.value"</span>
				:<span class="pl-c1">checked</span><span class="pl-c1">=</span><span class="pl-s">"inArray(option.value, filter.active)"</span>
				@<span class="pl-c1">change</span><span class="pl-c1">=</span><span class="pl-s">"updateFilter"</span><span class="pl-c1">&gt;</span>
		<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">li</span><span class="pl-c1">&gt;</span>
	<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">ul</span><span class="pl-c1">&gt;</span>
<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">template</span><span class="pl-c1">&gt;</span></pre></div>
<p dir="auto">In this code example is :checked set to true or false whenever it's in the active filter array.<br>
It seems when this component is updated (via vuex) the :checked stated doesn't get's updated like in 2.1.6. In my application is the state managed <em>almost</em> totally by Vuex.</p>
<h3 dir="auto">Vue.js version</h3>
<p dir="auto">2.1.7+</p>
<h3 dir="auto">Reproduction Link</h3>
<p dir="auto"><a href="http://vroom.automotivated.nl/" rel="nofollow">http://vroom.automotivated.nl/</a></p>
<h3 dir="auto">Howto reproduce</h3>
<p dir="auto">When selecting several checkboxes (like brands) and use your <strong>browser back button</strong> to fallback to previous states. (it's managed by the popstate event and uses vuex actions to update actively the new state)</p>
<h3 dir="auto">What is expected</h3>
<p dir="auto">The checkbox should go on or off depending on the previous action or new current state.</p>
<h3 dir="auto">What is actually happening?</h3>
<p dir="auto">Everything get's correctly updated (value wise), except the checkbox isn't honored to update (checked true/false). It keeps in a previous state. When selecting multiple after eachother and navigating back and forward is looks like is off a beat and missing the last changed checkbox.</p>
<p dir="auto">Code that goes with it:<br>
<a href="https://github.com/Automotivated/vroom/blob/master/src/views/elements/filters/Multiple.vue">https://github.com/Automotivated/vroom/blob/master/src/views/elements/filters/Multiple.vue</a><br>
Full github repo:<br>
<a href="https://github.com/Automotivated/vroom/">https://github.com/Automotivated/vroom/</a></p>
<p dir="auto">While reading the <a href="https://vuex.vuejs.org/en/forms.html" rel="nofollow">docs</a> in Vuex, it seems to be best practise to do it like I did.</p>
<h3 dir="auto">When did it work</h3>
<p dir="auto">It worked like a charm in 2.1.6. Seems really that fixing this bug triggered this bug to be created.</p>
<p dir="auto">Example: <a href="https://jsfiddle.net/vfmxxzeb/3/" rel="nofollow">https://jsfiddle.net/vfmxxzeb/3/</a></p>
<p dir="auto">What the example does:</p>
<ol dir="auto">
<li>Resets <code class="notranslate">values</code> to an array of values every one second</li>
<li>Each line has two checkboxes, both of which are bound to the same value</li>
</ol>
<p dir="auto">Steps to reproduce:</p>
<ol dir="auto">
<li><em>Click</em> on the enabled checkbox on any line</li>
</ol>
<p dir="auto">Expected behaviour:</p>
<ol dir="auto">
<li>After one second, the value should be reset. Both checkboxes should reflect the same value</li>
</ol>
<p dir="auto">Actual behaviour (tested on Chrome):</p>
<ol dir="auto">
<li>The disabled checkbox correctly reflects the value, but the enabled checkbox does not reflect the value. The enabled checkbox will reflect the correct value only after blurring from the checkbox</li>
</ol>