title: Vue Single File Component binding data-v-xxxxxxxx to generated elements
body: <p>I'm building a Vue component as a Single File Component:</p>
  
  <pre><code>&lt;template&gt;
    &lt;div class="chart"&gt;&lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import * as d3 from 'd3';
  
  export default {
    data() {
      return {
        data: [4, 8, 15, 16, 23, 42],
      };
    },
    mounted() {
      d3.select('.chart')
        .selectAll('div')
          .data(this.data)
        .enter()
          .append('div')
          .style('width', d =&gt; `${10 * d}px`)
          .text(d =&gt; d);
    },
  };
  &lt;/script&gt;
  
  &lt;style lang="scss" scoped&gt;
  .chart {
    div {
      background-color: steelblue;
      color: white;
      font: 10px sans-serif;
      margin: 1px;
      padding: 3px;
      text-align: right;
    }
  }
  &lt;/style&gt;
  </code></pre>
  
  <p>After processing with webpack, the CSS is rendered like so:</p>
  
  <pre><code>&lt;style type="text/css"&gt;
  .chart div[data-v-xxxxxxxx] {
    background-color: steelblue;
    color: white;
    font: 10px sans-serif;
    margin: 1px;
    padding: 3px;
    text-align: right;
  }
  &lt;/style&gt;
  </code></pre>
  
  <p>But the HTML shows up as:</p>
  
  <pre><code>&lt;div data-v-xxxxxxxx class="chart"&gt;
      &lt;div style="width: 40px;"&gt;4&lt;/div&gt;
      &lt;div style="width: 80px;"&gt;8&lt;/div&gt;
      &lt;div style="width: 150px;"&gt;15&lt;/div&gt;
      &lt;div style="width: 160px;"&gt;16&lt;/div&gt;
      &lt;div style="width: 230px;"&gt;23&lt;/div&gt;
      &lt;div style="width: 420px;"&gt;42&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I'm using D3 to generate the child <code>&lt;div&gt;</code>s. I've found that <code>data-v-xxxxxxxx</code> isn't bound to generated elements. If I include the child <code>&lt;div&gt;</code>s in the original template rather than generating them, they each have the <code>data-v-xxxxxxxx</code> attribute and the styles apply as expected</p>
  
  <p>I would think that any descendant of the root node, whether included in the template or generated, should be bound to the rules of the scoped CSS. Is there any way to force this?</p>