Nuxt3 dynamic component loading style conflict problem

Question

I have a Nuxt 3 application where I want to load 2 different Header components for Mobile and Desktop.
I have Header.vue and MobileHeader.vue and I want to load them respectively for desktop and mobile.
this is my layout code:

<template>
  <MobileHeader v-if="isMobile" />

  <Header v-else />
  
  <slot />
</template>
<script setup>
const MobileHeader = defineAsyncComponent(() => import('~/components/layout/MobileHeader.vue'));
const Header = defineAsyncComponent(() => import('~/components/layout/Header.vue'));
</script>

Header.vue and MobileHeader.vue both have their own scss files which is imported like this:

<style lang="scss">
@import "/assets/scss/components/layout/mobile-header";
</style>

The problem is both mobile-header.scss and header.scss files are loaded in page and obviously I want them to load only if their respective component is loaded.

how can I achieve this?

ps1. I disabled component autoloading in nuxt.config.ts
ps2. I tried importing components the usual way but it didn't work too.

import MobileHeader from '~/components/layout/MobileHeader.vue';

Answer 1

I figured it out. for future references and anyone who has the same question, here it goes.
I changed the code like this and it works:

<template>
  <Header />
  <slot />
</template>
<script setup>

const {isMobile} = useDevice();

const Header = defineAsyncComponent(() => isMobile ? import('~/components/layout/MobileHeader.vue') : import('~/components/layout/Header.vue'));