Vue js: Child component's CSS is overridden by the parent tag <h1>

Hello ,

First let me show you the parent component :

(...)
<div class="card-header">
                            <h1>
                                <company-edit :id="companyId" :key="companyId"></company-edit>
                            </h1>
</div>

(...)


<style scoped></style>

`
As you can see there is no specific styles.

component :

 <div class="form-group row">
        <label class="col-4 col-form-label pr-0" :for="'companyNameI"> Company name in-              
                 house</label>
     <div class="col">
            <input (...)

<style scoped></style>

The problem is when I put <company-edit> inside <h1></h1> tag all the content of the <company-edit> is overridden by H1 style, and all the form labels are on H1 style!

Is there a way to "scope" the CSS of child component ?

Thanks