title: How to correctly use "scoped" styles in VueJS single file components?
body: <p>The <a href="https://vue-loader.vuejs.org/en/features/scoped-css.html" rel="noreferrer">docs</a> on VueJS state that <code>scoped</code> should limit styles to the component. But if I create 2 components with same <code>baz</code> style, it will leak from one component into another:</p>
  <p><code>foo.vue</code></p>
  <pre><code>&lt;template&gt;
    &lt;div class=&quot;baz&quot;&gt;
      &lt;Bar&gt;&lt;/Bar&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;style scoped&gt;
  .baz {
    color: red;
  }
  &lt;/style&gt;
  </code></pre>
  <p><code>bar.vue</code></p>
  <pre><code>&lt;template&gt;
    &lt;div class=&quot;baz&quot;&gt;bar&lt;/div&gt;
  &lt;/template&gt;
  
  &lt;style scoped&gt;
  .baz {
    background-color: blue;
  }
  &lt;/style&gt;
  </code></pre>
  <p>I expect that <code>baz</code> will be different in both components. But after generating a web page, I can see the red text on blue background, which means that <code>foo</code>'s scoped style affects the <code>bar</code> component. The generated code looks like this:</p>
  <pre><code>&lt;div class=&quot;baz&quot; data-v-ca22f368&gt;
    &lt;div class=&quot;baz&quot; data-v-a0c7f1ce data-v-ca22f368&gt;
      bar
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>As you can see, the &quot;leak&quot; is intentionally generated by VueJS via specifying two data attributes into the <code>bar</code> component. But why?</p>