<h3 dir="auto">Version</h3>
<p dir="auto">2.6.11</p>
<h3 dir="auto">Reproduction link</h3>
<p dir="auto"><a href="https://codepen.io/tornadoalert/pen/rNjVzbd" rel="nofollow">https://codepen.io/tornadoalert/pen/rNjVzbd</a></p>
<h3 dir="auto">Steps to reproduce</h3>
<p dir="auto">Setting the value as prop on a custom element fails. It gets passed as a string [Object Object] instead.</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;custom-element :value.prop=&quot;message&quot;&gt;&lt;/custom-element&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">custom-element</span> <span class="pl-c1">:value.prop</span>="<span class="pl-s">message</span>"<span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">custom-element</span><span class="pl-kos">&gt;</span></pre></div>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="new Vue({
  el: '#app',
  data: {
       message: {'hello': 'world'}
  }
})"><pre class="notranslate"><span class="pl-k">new</span> <span class="pl-v">Vue</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
  <span class="pl-c1">el</span>: <span class="pl-s">'#app'</span><span class="pl-kos">,</span>
  <span class="pl-c1">data</span>: <span class="pl-kos">{</span>
       <span class="pl-c1">message</span>: <span class="pl-kos">{</span><span class="pl-s">'hello'</span>: <span class="pl-s">'world'</span><span class="pl-kos">}</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span></pre></div>
<h3 dir="auto">What is expected?</h3>
<p dir="auto">The :value.prop should be passed as an object</p>
<h3 dir="auto">What is actually happening?</h3>
<p dir="auto">The :value.prop is being passed as a string "[Object Object]"</p>
<h3 dir="auto">Version</h3>
<p dir="auto">2.5.13</p>
<h3 dir="auto">Reproduction link</h3>
<p dir="auto"><a href="https://jsfiddle.net/56zfwbe5/1/" rel="nofollow">https://jsfiddle.net/56zfwbe5/1/</a></p>
<h3 dir="auto">Steps to reproduce</h3>
<ul dir="auto">
<li>Open the <a href="https://jsfiddle.net/56zfwbe5/1/" rel="nofollow">jsfiddle  demo</a></li>
<li>Open your console</li>
<li>Run the demo</li>
<li>now you should see an error like this: [Vue warn]: Duplicate keys detected:</li>
</ul>
<h3 dir="auto">What is expected?</h3>
<p dir="auto">Children inside a repeated <code class="notranslate">&lt;template&gt;</code> should share the same keys as they should both re-render if the target element changes.</p>
<h3 dir="auto">What is actually happening?</h3>
<p dir="auto">Errors are raised with the message : [Vue warn]: Duplicate keys detected is raised.</p>
<hr>
<h2 dir="auto">Cause</h2>
<p dir="auto">This behavior is linked to <a href="https://github.com/vuejs/vue/pull/7200" data-hovercard-type="pull_request" data-hovercard-url="/vuejs/vue/pull/7200/hovercard">this PR</a> and was also references in <a href="https://github.com/vuejs/vue/issues/3810#issuecomment-351361476" data-hovercard-type="issue" data-hovercard-url="/vuejs/vue/issues/3810/hovercard">this issue</a></p>
<h2 dir="auto">Workaround</h2>
<p dir="auto">You could avoid this error by adding some prefix / suffix</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;template v-for=&quot;it in items&quot;&gt;
    &lt;li :key=&quot;it.id + '-label'&quot;&gt;{{it.label}}&lt;/li&gt;
    &lt;li :key=&quot;it.id + '-separator'&quot; class=&quot;separator&quot;&gt;&amp;gt;&lt;/li&gt;
&lt;/template&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">template</span> <span class="pl-c1">v-for</span>="<span class="pl-s">it in items</span>"<span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">li</span> <span class="pl-c1">:key</span>="<span class="pl-s">it.id + '-label'</span>"<span class="pl-kos">&gt;</span>{{it.label}}<span class="pl-kos">&lt;/</span><span class="pl-ent">li</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">li</span> <span class="pl-c1">:key</span>="<span class="pl-s">it.id + '-separator'</span>" <span class="pl-c1">class</span>="<span class="pl-s">separator</span>"<span class="pl-kos">&gt;</span>&amp;gt;<span class="pl-kos">&lt;/</span><span class="pl-ent">li</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">template</span><span class="pl-kos">&gt;</span></pre></div>