title: Scoped CSS not being applied within the component
body: <p>I have the following form component:</p>
  
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          &lt;form&gt;
              &lt;input placeholder="Recipe Name"&gt;
              &lt;textarea placeholder="Recipe Description..." rows="10"&gt;&lt;/textarea&gt;
          &lt;/form&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
      name: 'AddRecipeForm'
  }
  &lt;/script&gt;
  
  &lt;style scoped&gt;
  form {
      display: flex;
      flex-direction: column;
  }
  &lt;/style&gt;
  </code></pre>
  
  <p>The <code>&lt;style&gt;</code> uses the <code>scoped</code> attribute.</p>
  
  <p>When applied, the CSS <strong>does not</strong> get loaded in. When <code>scoped</code> is removed, it <strong><em>does</em></strong> get applied.</p>
  
  <p>However I want to keep it local to the component.</p>
  
  <p>Why is the CSS not getting applied when the <code>scoped</code> attribute is present?</p>