Slots don't work as nested conditional component

Question

I'm working with Quasar/Vue 3. Imagine a scenerio.

• IndexPage.vue - page subjected to routes
• AwPage.vue - wrapper component, suppose to have slots, used in IndexPage
• _sub/PageDesktop PageDesktop PageDesktopall have have 3 slots.
• each page is then imported into AwPage.vue, on the base condition each will be rendered.

All in one - Structure

**Summing up, the result is slotted content doesn't load. **

Result, It suppose to have content

What I tried

• I removed markRaw and shallowRef, assuming they could be potential blockers.
• I removed <component :is="Pages[variant]" />
• To test I just added PageDesktop, single component, no conditional, but It had the same blank screen on the browser. Screenshots I've already shared.

IndexPage.vue

<template>
  <AwPage variant="desktop">
    <template #sidebar>
      <AwSidebar :tags="tagsData" />
    </template>

    <template #list>
      <!-- <NotesList :notes="notesData" /> -->
      <NotesList :notes="notesData" />
    </template>

    <template #editor>
      <template v-if="!!$route.query.mode">
        <AwNoteEditor v-if="$route.query.mode === 'edit'" :notes="notesData" />
        <AwNoteView v-if="$route.query.mode === 'view'" :notes="notesData" />
      </template>
      <div v-else>
        <AwSelectNote />
      </div>
    </template>
  </AwPage>
</template>

<script setup lang="ts">
import AwPage from 'src/components/shared/AwPage/AwPage.vue';

const tagsData = tags;
const notesData = notes;
</script>

<style scoped lang="scss"></style>

AwPage.vue

<!-- eslint-disable vue/multi-word-component-names -->
<script setup lang="ts">
// import PageDesktop from './sub/PageDesktop.vue';
// import PageMobile from './sub/PageMobile.vue';
// import PageTablet from './sub/PageTablet.vue';

defineProps<{
  debug?: boolean;
  variant: 'desktop' | 'tablet' | 'mobile';
}>();

// const Pages = shallowRef({
//   desktop: PageDesktop,
//   tablet: PageTablet,
//   mobile: PageMobile,
// });

// console.log(Pages);
//
</script>

<template>
  <!-- <component :is="PageDesktop" :debug="debug" /> -->
  <PageDesktop />
</template>

<style scoped lang="scss">
@media (min-width: 1280px) {
  .responsive-section {
    display: none;
  }
}

@media (max-width: 1280px) {
  .q-drawer {
    display: block;
  }
  .note-view {
    display: none;
  }
  .note-list {
    width: 100%;
  }
  .side {
    width: 35.15%;
    flex-shrink: 0;
  }
  .list {
    width: 64.85%;
  }
  .list-name {
    display: none;
  }
}
</style>

PageDesktop

<template>
  <q-page class="row justify-between">
    <section class="row justify-between t-w-[45%]">
      <aside class="t-w-[46.15%] side" :class="{ 'border-debug': debug }">
        <slot name="sidebar" />
      </aside>
      <div class="t-w-[53.85%] bg-dark" :class="{ 'border-debug': debug }">
        <slot name="list" />
      </div>
    </section>
    <section class="t-w-[54.86%]" :class="{ 'border-debug': debug }">
      <slot name="editor" />
    </section>
  </q-page>
</template>

<script setup lang="ts">
defineProps<{
  debug?: boolean;
}>();
</script>

TL;DR

All I need to make UI responsive on the base of prop. Already 3 pages with relevant size CSS is created, I just pass prop and want to render different layout on different screen size.

Possible problem

As I thing it's not something wrong with slots. The main problem is AwPage expects slots immediately but I have added conditional rendering. I called PageDesktop on IndexPage.vue instead of AwPage. It worked but this's not what I need.

<template>
  <PageDesktop variant="desktop">
    <template #sidebar>
      <AwSidebar :tags="tagsData" />
    </template>

    <template #list>
      <!-- <NotesList :notes="notesData" /> -->
      <NotesList :notes="notesData" />
    </template>

    <template #editor>
      <template v-if="!!$route.query.mode">
        <AwNoteEditor v-if="$route.query.mode === 'edit'" :notes="notesData" />
        <AwNoteView v-if="$route.query.mode === 'view'" :notes="notesData" />
      </template>
      <div v-else>
        <AwSelectNote />
      </div>
    </template>
  </PageDesktop>
</template>

<script setup lang="ts">
// import AwPage from 'src/components/shared/AwPage/AwPage.vue';

const tagsData = tags;
const notesData = notes;
</script>

<style scoped lang="scss"></style>