<h3 dir="auto">What problem does this feature solve?</h3>
<p dir="auto">Both I and a colleague have spent hours debugging issues caused by having two refs with the same name.  Two cases where this can happen:</p>
<ol dir="auto">
<li>Simple stupidity:</li>
</ol>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;comp1 ref='comp'/&gt;
&lt;comp2 ref='comp/&gt;"><pre class="notranslate"><code class="notranslate">&lt;comp1 ref='comp'/&gt;
&lt;comp2 ref='comp/&gt;
</code></pre></div>
<ol start="2" dir="auto">
<li>Not realizing that refs don't seem to work in a v-for:</li>
</ol>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;tabs v-for='title of titles'&gt;
&lt;fubar v-if='title===&quot;FUBAR&quot;' ref='fubar'/&gt;
&lt;/tabs&gt;"><pre class="notranslate"><code class="notranslate">&lt;tabs v-for='title of titles'&gt;
&lt;fubar v-if='title==="FUBAR"' ref='fubar'/&gt;
&lt;/tabs&gt;
</code></pre></div>
<p dir="auto">In this case, it is reasonable to assume the ref would work correctly because there will only be one "fubar" component instantiated assuming 'titles' has no duplicates.  But the ref does not work right, either because ref ignores "v-if" or because ref doesn't work right in v-for.</p>
<h3 dir="auto">What does the proposed API look like?</h3>
<p dir="auto">Simply issue a Vue warning when multiple refs with the same name are encountered.</p>
<h3 dir="auto">Version</h3>
<p dir="auto">2.4.2</p>
<h3 dir="auto">Reproduction link</h3>
<p dir="auto"><a href="https://github.com/vuejs-templates/pwa">https://github.com/vuejs-templates/pwa</a></p>
<h3 dir="auto">Steps to reproduce</h3>
<ol dir="auto">
<li>Clone official vue-pwa template</li>
<li>Add one more entry point in line <a href="https://github.com/vuejs-templates/pwa/blob/master/template/build/webpack.base.conf.js#L12">#L12</a> which includes vue</li>
</ol>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="entry: {
  app: './src/main.js',
  vendor: ['vue']
}"><pre class="notranslate"><code class="notranslate">entry: {
  app: './src/main.js',
  vendor: ['vue']
}
</code></pre></div>
<ol start="3" dir="auto">
<li>Run <code class="notranslate">npm run dev</code> and check console. You can see that although  <code class="notranslate">productionTip</code> option is disabled in <code class="notranslate">main.js</code>, the warning still appears in the console.</li>
</ol>
<h3 dir="auto">What is expected?</h3>
<p dir="auto"><code class="notranslate">config.productionTip</code> to working properly</p>
<h3 dir="auto">What is actually happening?</h3>
<p dir="auto">When vue is imported in multiple entry points, it's impossible to disable productionTip.</p>