<h3 dir="auto">Version</h3>
<p dir="auto">2.5.9</p>
<h3 dir="auto">Reproduction link</h3>
<p dir="auto"><a href="https://codepen.io/maple-leaf/pen/BmgaqG" rel="nofollow">https://codepen.io/maple-leaf/pen/BmgaqG</a></p>
<h3 dir="auto">Steps to reproduce</h3>
<ol dir="auto">
<li>open the <a href="https://codepen.io/maple-leaf/pen/BmgaqG" rel="nofollow">codepen demo</a></li>
<li>open devtool if u are on chrome</li>
<li>click <code class="notranslate">change data which will raise error</code> button</li>
<li>now you should see an error like this: <code class="notranslate">TypeError: Cannot read property 'key' of undefined</code>.</li>
<li>refresh demo page</li>
<li>click <code class="notranslate">safe to change data here</code> button</li>
<li>now you should not see an error like before, and data being updated correctly</li>
</ol>
<h3 dir="auto">What is expected?</h3>
<p dir="auto">maybe same behavior like both should raise an error, but if raise error, maybe <code class="notranslate">duplicate key</code> error should be showed too <strong>which will help developer easier to find what data is killing page</strong>.</p>
<h3 dir="auto">What is actually happening?</h3>
<p dir="auto">both data have duplicate keys, but behavior is different</p>
<hr>
<p dir="auto">why error being raise when you click <code class="notranslate">change data which will raise error</code> button?</p>
<p dir="auto">Because the data will raise error has some special changes. It remove all keys except duplicate key 'b' compared to initial data and the order is different.</p>
<p dir="auto">This will make <code class="notranslate">updateChildren</code> function in <code class="notranslate">vdom/patch.js</code> hit <a href="https://github.com/vuejs/vue/blob/dev/src/core/vdom/patch.js#L421">this code section</a>, which will create a <code class="notranslate">oldKeyToIdx</code>. And then when first key 'b' comes, it will set value of <code class="notranslate">b</code> in <code class="notranslate">oldKeyToIdx</code> to <code class="notranslate">undefined</code>, and then next key <code class="notranslate">b</code> comes, it will compare old node and new node via function <a href="https://github.com/vuejs/vue/blob/dev/src/core/vdom/patch.js#L436">sameNode</a>. But this time, index of old node which key is <code class="notranslate">b</code> is undefined now. So a js error is being raised.</p>
<p dir="auto">I want to load the template for a VueJS component dynamically. I'd like to make an AJAX call using jQuery, and whatever the server returns should be the template of the VueJS component. Here's a simplified version of the code with the AJAX call removed since it's irrelevant where the data is coming from:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="BoardFeed = Vue.extend
    template: '&lt;div&gt;This should be replaced&lt;/div&gt;'
    data: -&gt;
            return items: null
    created: -&gt;
        @template = &quot;&lt;div&gt;Template returned from server, what I really want&lt;/div&gt;&quot;"><pre class="notranslate"><code class="notranslate">BoardFeed = Vue.extend
    template: '&lt;div&gt;This should be replaced&lt;/div&gt;'
    data: -&gt;
            return items: null
    created: -&gt;
        @template = "&lt;div&gt;Template returned from server, what I really want&lt;/div&gt;"
</code></pre></div>
<p dir="auto">In the above example I'm using the created hook which I thought would be suitable for this, but the newer template is never rendered, only the older one.</p>
<p dir="auto">Is it possible to achieve this?</p>