Vue/Nuxt scoped style does not apply data attribute, is this a bug?

Question

I'm relatively new to vue and nuxt and am working on a portfolio to get in to it. (Vue/Nuxt 3)

I use Nuxt Layouts and have a default layout with components like

• header
• slot
• footer

My code for default layout and header simplified looks like:

default:
<template>
 <div class="container">
   <Header/>
   <slot/>
   <Footer/>
 </div>
</template>

<style scoped>
  .container {
    some stuff
  }
</style>

header:
<template>
 <div class="container">
   some stuff
 </div>
</template>

<style scoped>
  .container {
    some stuff
  }
</style>

If I get this right, scoped styling should add data attribute like .container[data-v-f3f3eg9] to each of the container classes to not affect each other. But it does not add data attribute and layout styling does overwrite headers styling.

In Chrome it looks like:

So is this a problem with header nested into Nuxt layout or is this a bug or how can I solve this problem? I could just change the class names, but I am aware of this "bug" occuring somewhere in the project where I don't notice.