Scoped CSS not being applied within the component : <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>
