script setup 태그 유무에 따라서 페이지 출력이 안됩니다.

 <template>
  <q-page class="q-pa-xl">
    <section class="q-mb-xl">
      <div class="text-h4">Breakpoints</div>
      <q-separator class="q-my-md" />
      <div class="target"></div>
    </section>
    <section class="q-mb-xl">
      <div class="text-h4">$q.screen</div>
      <q-separator class="q-my-md" />
      <div>
        {{ $q.screen }}
      </div>
    </section>
  </q-page>
</template>

<script>
export default {
  mounted() {
    console.log('this.$q.screen: ', this.$q.screen);
  },
};
</script>

<script setup>
import { userQuasar } from 'quasar';

const $q = userQuasar();
console.log('setup -> $q.screen: ', $q.screen);
</script>

<style lang="scss" scoped>
.target {
  height: 200px;
  background-color: $dark;
}

@media (max-width: $breakpoint-xs-max) {
  .target {
    background-color: $red;
  }
}

.target {
  body.screen--sm & {
    background-color: $orange;
  }
}
</style>

08:41 초에서 진행하는 userQuasar 를 script setup 태그 안에 임포트하고 실행하면 어떠한 오류도 없이 빈 화면만 출력되고 있습니다. script setup 을 주석 처리하면 정상적으로 breakpoints 페이지로 이동하고 정상 출력이 됩니다. 영상 따라서 하고 있는데 저는 왜 setup 태그 유무에 따라 빈 화면이 출력하는 걸까요 ..?

<!--
<script setup>
import { userQuasar } from 'quasar';

const $q = userQuasar();
console.log('setup -> $q.screen: ', $q.screen);
</script>
-->

<script>
export default {
  mounted() {
    console.log('this.$q.screen: ', this.$q.screen);
  },
  setup() {
    // 이곳에서 $q Object를 생성하고 리턴해줘야 합니다.
  }
};
</script>