Vue Стилизация дочерней формы компонента и элементов формы

Question

Я пытаюсь стилизовать форму в дочернем компоненте, и у меня возникают проблемы с нацеливанием селекторов \deep\, >>> и ::v-deep на элементы <form>, <input> или <button>.

// Родительский компонент

<template>
    <div class="form-bottom">
        <login-form :is-modal="false"></login-form>
    </div>
<template>

<style scoped>
    .form-bottom /deep/ form {
        display: block;
        margin-top: 0em;
    }
</style>

// Родительский компонент

<template>
    <form autocomplete="off" @submit.prevent="login" method="post" role="form" action="" class="login-form">
        <div class="form-group">
            <label class="sr-only" for="email">E-mail</label>
            <input type="email" id="email" ref="email" class="form-username form-control" placeholder="user@example.com" v-model="email" required />
        </div>
        <div class="form-group">
            <label class="sr-only" for="password">Password</label>
            <input type="password" id="password" class="form-password form-control" placeholder="Password..." v-model="password" required />
        </div>
        <button type="submit" ref="password" class="btn">Sign in</button> <a href="/password/forgot" class="forgot-password" @click.prevent="forgotPasswordModal">Forgot Password</a><!--<a href="/password/forgot">Forgot Password</a>-->
    </form>
</template>

Выход CSS и HTML в консоли браузера.

// Родительский CSS

.form-bottom /deep/ form[_v-41cced72] {
    display: block;
    margin-top: 0em;
}

// Дочерний шаблон

<form autocomplete="off" method="post" role="form" action="" _v-3353696a="" class="login-form">
    <div _v-3353696a="" class="form-group">
        <label for="email" _v-3353696a="" class="sr-only">E-mail</label> 
        <input type="email" id="email" placeholder="user@example.com" required="required" _v-3353696a="" class="form-username form-control">
    </div>
    <div _v-3353696a="" class="form-group">
        <label for="password" _v-3353696a="" class="sr-only">Password</label>
        <input type="password" id="password" placeholder="Password..." required="required" _v-3353696a="" class="form-password form-control">
    </div>
    <button type="submit" _v-3353696a="" class="btn">Sign in</button> <a href="/password/forgot" _v-3353696a="" class="forgot-password">Forgot Password</a>
</form>

Полученный дочерний элемент HTML имеет атрибут _v-3353696a="" в элементе формы. В то время как у Родителя CSS есть селектор .form-bottom /deep/ form[_v-41cced72]. Должен ли селектор /deep/ быть скомпилирован в атрибут scoped?