作用域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移除后，它会被应用。

但是，我想将其保留在组件本地。

当scoped属性存在时，为什么CSS无法应用？