working on dragable wraper

src/components/WrapperBox.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useQuasar } from "quasar";
+
+const $q = useQuasar();
+const count = ref(0);
+function increment() {
+  count.value++
+}
+
+</script>
+
+<template>
+  <Draggable :grid="[25, 25]">
+    <div>
+      <div>Grid with component</div>
+
+        <q-btn @click="increment">Count is: {{ count }}</q-btn>
+        <q-card class="my-card">
+            hi
+        </q-card>
+    </div>
+  </Draggable>
+</template>
+<style lang="sass" scoped>
+.my-card
+  width: 50%
+  max-width: 250px
+</style>

src/pages/Editor.vue

@@ -1,14 +1,16 @@
 <script setup lang="ts">
+import WrapperBox from '../components/WrapperBox.vue';
 
 </script>
 
 <template>
 
+
+    <WrapperBox/>
     <Draggable>
     <div class="box">
 
     <q-btn
-        @click="showNotification"
         color="primary"
         label="Show another notification"
         />

vite.config.ts

@@ -12,11 +12,11 @@ export default defineConfig({
         },
     },
     plugins: [
-      vue({
-          template: { transformAssetUrls },
-      }),
+        vue({
+            template: { transformAssetUrls },
+        }),
 
-      quasar({
-          sassVariables: 'src/quasar-variables.sass',
-      }),]
+        quasar({
+            sassVariables: 'src/quasar-variables.sass',
+        })],
 })