How to access this.$q quasar object in setup? - Vue 3 Composition API

Question

I have a simple component script written in Options Api:

<script>
export default {
  data() {
    return {
      model: null,
    };
  },
  computed: {
    isMobile() {
      return this.$q.screen.xs || this.$q.screen.sm;
    }
  }
};
</script>

How do I rewrite it to Composition Api in Typescript? I managed to achieve something like this, but I do not know, how to access this.$q variable.

<script lang="ts">
import { computed, defineComponent, ref, ComputedRef } from 'vue';

export default defineComponent({
  name: 'QuasarTest',
  setup() {
    const isMobile: ComputedRef<boolean> = computed((): boolean => {
      return this.$q.screen.xs || this.$q.screen.sm;;
    });
    return {
      isMobile,
      model: ref(null),
    };
  }
});
</script>

Answer 1

If someone needed it in the future. The correct answer is to use composable: useQuasar as written in documentation