<p dir="auto">Hi.</p>
<p dir="auto">I have a big structure data whose content changes dynamicaly, and in which I want to observe tiny variables.<br>
For simplicity I made a code that is triggered on a click, code that call a timeout in order to be sure that all pending works (jquery, vue, and any others) are finished. In this timeout I change a boolean variable associated to a html checkbox.<br>
So far, it seems that the html vue is not correctly updated after change to the model from the timeout call.</p>
<h3 dir="auto">Vue.js version</h3>
<p dir="auto">2.1.8</p>
<h3 dir="auto">Reproduction Link</h3>
<p dir="auto">In the provided code/example, after a click on the html checkbox a timeout (set to 5s) is called, in which the checkbox variable value is changed.</p>
<p dir="auto">Here : <a href="http://codepen.io/anon/pen/BpaXze" rel="nofollow">http://codepen.io/anon/pen/BpaXze</a><br>
The code:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;script type=&quot;text/javascript&quot; src=&quot;https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js&quot;&gt;&lt;/script&gt;
&lt;div id='test'&gt;
  &lt;input v-model='checkbox' type=&quot;checkbox&quot; v-on:click=&quot;click()&quot;&gt;
  &lt;BR&gt;
  {{checkbox}}
&lt;/div&gt;
&lt;script&gt;
var vm = new Vue({
  el: '#test',
  data: {
    checkbox: true
  },
  methods:{
    click: function(){
      window.setTimeout(function() {
          vm.checkbox = true;
        }
      , 5000)
    }
  }
})
&lt;/script&gt;"><pre class="notranslate"><code class="notranslate">&lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"&gt;&lt;/script&gt;
&lt;div id='test'&gt;
  &lt;input v-model='checkbox' type="checkbox" v-on:click="click()"&gt;
  &lt;BR&gt;
  {{checkbox}}
&lt;/div&gt;
&lt;script&gt;
var vm = new Vue({
  el: '#test',
  data: {
    checkbox: true
  },
  methods:{
    click: function(){
      window.setTimeout(function() {
          vm.checkbox = true;
        }
      , 5000)
    }
  }
})
&lt;/script&gt;
</code></pre></div>
<h3 dir="auto">What is Expected?</h3>
<p dir="auto">I expect the checkbox to be updated after setting its value.</p>
<h3 dir="auto">What is actually happening?</h3>
<p dir="auto">The variable itself is correctly updated, but not the html checkbox.</p>
<h3 dir="auto">Vue.js version</h3>
<p dir="auto">2.0.1 / 2.0.2</p>
<h3 dir="auto">Reproduction Link</h3>
<p dir="auto"><a href="https://codepen.io/toxic-johann/pen/yajwRO" rel="nofollow">https://codepen.io/toxic-johann/pen/yajwRO</a></p>
<h3 dir="auto">Steps to reproduce</h3>
<p dir="auto">use a v-for to render component<br>
in component, you have to write a v-for with template in it but not wrapped  with a root element<br>
open console, and run test() function</p>
<h3 dir="auto">What is Expected?</h3>
<p dir="auto">open console, and run success() function</p>
<h3 dir="auto">What is actually happening?</h3>
<p dir="auto">throw the warning</p>
<blockquote>
<p dir="auto">[Vue warn]: It seems there are duplicate keys that is causing an update error. Make sure each v-for item has a unique key.<br>
and error<br>
Uncaught (in promise) TypeError: Cannot read property 'tag' of undefined</p>
</blockquote>
<p dir="auto">it's the same situation as <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="179992808" data-permission-text="Title is private" data-url="https://github.com/vuejs/vue/issues/3810" data-hovercard-type="issue" data-hovercard-url="/vuejs/vue/issues/3810/hovercard" href="https://github.com/vuejs/vue/issues/3810">#3810</a><br>
However, that one contains only two templates with v-if in  nested v-for<br>
And this one contains three templates with v-if</p>
<p dir="auto">And in my project, i contain with more.<br>
So, i also want to know, if there are more template in nested v-for, will it run good?</p>