How do I use vue-dragscroll in quasar? - vuejs3

Question

I want to use vue-dragscroll in my quasar project. I have created a boot file called scrollbar.js and it looks like this
import { boot } from "quasar/wrappers;"
import { createApp } from "vue";
import { dragscrollNext } from "vue-dragscroll";
import App from "./App.vue";
const app = createApp(App)
app.directive("dragscroll", dragscrollNext);
app.mount("#app");
export default boot(async(/* { app, router, ...} */) => {});
In my quasar.config.js file I did this:
boot: ["scrollbar"],
And in my component I have this:
<script setup>
import useTouch from "src/composables/useTouch.js";
defineProps({
items: Array,
})
const { isTouchDevice } = useTouch();
<script>
<template>
<div v-dragscroll="!isTouchDevice">
<ProductCard v-for="item in items" :key="item.id" :item="item" />
<div>
<template>
The useTouch.js composable looks like this:
export default () => {
const isTouchDevice = computed(
() =>
"ontouchstart" in window ||
navigator.maxTouchPoints > 0 ||
navigator.msMaxTouchPoints > 0
);
return {
isTouchDevice,
};
};
This doesn't work and when I run, it gives a blank page. What am I doing wrong here, how to make this work?