Styles overlap in nuxt js?

Question

Vue.js

there is a main page, in it I check if I logged in from the phone, then we bind it to the mobile template, otherwise it

turns out by default when I log in from the phone, it gives me styles from the MobileHeader component (mobile-default template) and from the Header component (template default) and when from a computer, also styles from two components,

how to get rid of it?

<script>
export default {
  layout: ({ $device }) => $device.isDesktop ? 'default' : 'mobile-default',
}
</script>

in mobile-default template i call header for mobile

<template>
  <div :class="$style.header">
    <header>
    </header>
  </div>
</template>

<style lang="scss" module>
header {
  background-color: var(--theme-second-color);
  height: 48px;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  z-index: 10;
  padding: 0 0 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>

to default for other devices

<template>
  <div :class="$style.header">
    <header>
    </header>
  </div>
</template>

<style lang="scss" module>
header{
  background-color:var(--theme-second-color);
  height: 60px;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  z-index: 10;
  padding: 0 7.5px 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>

Answer 1

scoped is used to localize styles in vue
<style scoped>and then they apply only to this component.
You can use a dynamic component to load the template.

<component :is="layout">
      <router-view/>
    </component>

computed: {
    layout() {
      return "admin-layout";
    }
  },

But I guess that's what you're doing, just taken out of context.
So scoped