Облачный CSS не применяется в компоненте

У меня есть следующий компонент формы:

<template>
    <div>
        <form>
            <input placeholder="Recipe Name">
            <textarea placeholder="Recipe Description..." rows="10"></textarea>
        </form>
    </div>
</template>

<script>
export default {
    name: 'AddRecipeForm'
}
</script>

<style scoped>
form {
    display: flex;
    flex-direction: column;
}
</style>

<style> использует атрибут scoped.

При применении CSS не загружается. Когда scoped удаляется, применяется делает.

Однако я хочу сохранить его локальным для компонента.

Почему CSS не применяется, когда присутствует атрибут scoped?