Пересекаются стили в nuxt js?

есть главная страница, в ней я проверяю, если зашли с телефона, то привязываем к шаблону mobile, иначе по дефолту

получается, когда я захожу с телефона, мне выдает и стили с компонента MobileHeader(шаблон mobile-default) и с компонента Header (шаблон default) и когда с компа, тоже стили с двух компонентов

как от этого избавиться?

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



в шаблоне mobile-default я вызываю header для мобильных
<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>

в default для остальных устройств

<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>