<h3 dir="auto">Vue.js version</h3>
<p dir="auto">2.2.2</p>
<h3 dir="auto">Reproduction Link</h3>
<p dir="auto"><a href="https://jsfiddle.net/8azt2xz9/3/" rel="nofollow">https://jsfiddle.net/8azt2xz9/3/</a><br>
and click <code class="notranslate">filter</code>, vue.js throw error <code class="notranslate">duplicate keys</code> error</p>
<p dir="auto">if bind key is an object, vnode <code class="notranslate">updateChildren</code> algorithm has problems.<br>
So the key is strictly required a string value?</p>
<h3 dir="auto">Version</h3>
<p dir="auto">2.6.11</p>
<h3 dir="auto">Reproduction link</h3>
<p dir="auto"><a class="commit-link" data-hovercard-type="commit" data-hovercard-url="https://github.com/vueschool/vuejs-components-fundamentals/commit/3a90eeace5d3f8c01b5c989bd47850a96510eb51/hovercard" href="https://github.com/vueschool/vuejs-components-fundamentals/commit/3a90eeace5d3f8c01b5c989bd47850a96510eb51">vueschool/vuejs-components-fundamentals@<tt>3a90eea</tt></a></p>
<h3 dir="auto">Steps to reproduce</h3>
<p dir="auto">Currently, when I get a Vue "warn"ing like</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: &quot;groupBy&quot;

found in

---&gt; &lt;OpsSidebarTab&gt; at src/components/a/b/c.vue"><pre class="notranslate"><code class="notranslate">[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "groupBy"

found in

---&gt; &lt;OpsSidebarTab&gt; at src/components/a/b/c.vue
</code></pre></div>
<h3 dir="auto">What is expected?</h3>
<p dir="auto">The warning should go to <code class="notranslate">console.warn</code></p>
<h3 dir="auto">What is actually happening?</h3>
<p dir="auto">The warning goes to <code class="notranslate">console.error</code></p>
<hr>
<p dir="auto">To duplicate the issue, check out the link, then mutate one of the props in the example.</p>
<p dir="auto">Currently, when I get a Vue "warn"ing like</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: &quot;groupBy&quot;

found in

---&gt; &lt;OpsSidebarTab&gt; at src/components/a/b/c.vue"><pre class="notranslate"><code class="notranslate">[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "groupBy"

found in

---&gt; &lt;OpsSidebarTab&gt; at src/components/a/b/c.vue
</code></pre></div>
<p dir="auto">It actually logs it to console.error.</p>
<p dir="auto">How can I instead make warnings log to console.warn instead?</p>
<p dir="auto">I know I could do <code class="notranslate">Vue.config.warnHandler</code>, but I don't know how to get it be the same format as the regular Vue output.  For example, would I do something like</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="Vue.config.warnHandler = fucntion (msg, vm, trace) {
  console.warn(`[Vue warn]: ${msg}\nfound in\n---&gt;${trace}`)
}"><pre class="notranslate"><span class="pl-smi">Vue</span><span class="pl-kos">.</span><span class="pl-c1">config</span><span class="pl-kos">.</span><span class="pl-c1">warnHandler</span> <span class="pl-c1">=</span> <span class="pl-en">fucntion</span> <span class="pl-kos">(</span><span class="pl-s1">msg</span><span class="pl-kos">,</span> <span class="pl-s1">vm</span><span class="pl-kos">,</span> <span class="pl-s1">trace</span><span class="pl-kos">)</span><span class="pl-kos"></span> <span class="pl-kos">{</span>
  <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">warn</span><span class="pl-kos">(</span><span class="pl-s">`[Vue warn]: <span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">msg</span><span class="pl-kos">}</span></span>\nfound in\n---&gt;<span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">trace</span><span class="pl-kos">}</span></span>`</span><span class="pl-kos">)</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">?</p>
<p dir="auto">Are there ever other formats I have to worry about?  I wish I could just redirect these errors to <code class="notranslate">console.warn</code> without having to reformat them</p>