diff --git a/.npmignore b/.npmignore
index 5223299..f9e1063 100644
--- a/.npmignore
+++ b/.npmignore
@@ -31,4 +31,4 @@ sortablejs-*.tgz
 # Specific to ignoring when packaging
 .github
 
-
+readme
diff --git a/README.md b/README.md
index a4d1278..bb629f6 100644
--- a/README.md
+++ b/README.md
@@ -4,7 +4,7 @@
 
 ![GIF of the demo being used](./readme/demo.gif)
 
-This is a thin wrapper around the great [SortableJS](https://github.com/SortableJS/Sortable) library. I had many issues migrating from Vue.Draggable to vue.draggable.next, and after briefly investigating I decided that it was too complicated and a smaller solution was the answer. This wrapper attempts to keep you as close to Sortable as possible.
+This is a thin wrapper around the great [SortableJS](https://github.com/SortableJS/Sortable) library for Vue 2 & 3. I had many issues migrating from Vue.Draggable to vue.draggable.next, and after briefly investigating I decided that it was too complicated and a smaller solution was the answer. This wrapper attempts to keep you as close to Sortable as possible.
 
 ### Why not use \<other library\>?
 
@@ -124,6 +124,14 @@ onEnd(event) { moveItemInArray(store.state.items, event.oldIndex, event.newIndex
 
 You may also want to see the SortableJS store documentation [here](https://github.com/SortableJS/Sortable#store).
 
+## Vue 2 support
+
+If you are using version prior to `vue@2.7.0`, `@vue/composition-api` is required to be installed to use SortableJS-vue3 with Vue 2.
+
+Everything else should be similar to the example above for Vue 3.
+
+Under the hood, we use [Vue Demi](https://github.com/vueuse/vue-demi) a tool that allows us to write Universal Vue Libraries for Vue 2 & 3.
+
 ## Development
 
 1. Run `yarn` to install dependencies
diff --git a/package.json b/package.json
index 341bf79..a7fabe8 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "sortablejs-vue3",
-  "version": "1.2.6",
+  "version": "1.2.7",
   "author": {
     "email": "maxwell.leiter@gmail.com",
     "name": "Max Leiter",
@@ -36,11 +36,17 @@
   },
   "dependencies": {
     "sortablejs": "^1.15.0",
-    "vue": "^3.2.37"
+    "vue": "^3.2.37",
+    "vue-demi": "^0.13.11"
   },
   "peerDependencies": {
     "sortablejs": "^1.15.0",
-    "vue": "^3.2.25"
+    "vue": "^2.0.0 || >=3.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@vue/composition-api": {
+      "optional": true
+    }
   },
   "devDependencies": {
     "@types/node": "18.11.18",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ecff3d3..9d1a8f4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -10,11 +10,13 @@ specifiers:
   typescript: 4.9.4
   vite: 4.0.4
   vue: ^3.2.37
+  vue-demi: ^0.13.11
   vue-tsc: 1.0.21
 
 dependencies:
   sortablejs: 1.15.0
   vue: 3.2.41
+  vue-demi: 0.13.11_vue@3.2.41
 
 devDependencies:
   '@types/node': 18.11.18
@@ -711,6 +713,21 @@ packages:
       fsevents: 2.3.2
     dev: true
 
+  /vue-demi/0.13.11_vue@3.2.41:
+    resolution: {integrity: sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==}
+    engines: {node: '>=12'}
+    hasBin: true
+    requiresBuild: true
+    peerDependencies:
+      '@vue/composition-api': ^1.0.0-rc.1
+      vue: ^3.0.0-0 || ^2.6.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+    dependencies:
+      vue: 3.2.41
+    dev: false
+
   /vue-template-compiler/2.7.14:
     resolution: {integrity: sha512-zyA5Y3ArvVG0NacJDkkzJuPQDF8RFeRlzV2vLeSnhSpieO6LK2OVbdLPi5MPPs09Ii+gMO8nY4S3iKQxBxDmWQ==}
     dependencies:
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
index 61abd59..faa3d4e 100644
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import Sortable from "./Sortable.vue";
-import { computed, ref } from "vue";
+import { computed, ref } from "vue-demi";
 import type { SortableOptions } from "sortablejs";
 import type { AutoScrollOptions } from "sortablejs/plugins";
 
@@ -109,6 +109,8 @@ const elements = computed(() => {
   ];
 });
 
+const sortable = ref<InstanceType<typeof Sortable> | null>(null);
+
 const logEvent = (evt: Event, evt2?: Event) => {
   if (evt2) {
     console.log(evt, evt2);
@@ -117,6 +119,11 @@ const logEvent = (evt: Event, evt2?: Event) => {
   }
 };
 
+const logClick = (evt: Event) => {
+  if (sortable.value?.isDragging) return;
+  logEvent(evt);
+};
+
 const animating = ref(true);
 const scrollSensitivity = ref(50);
 const scrollSpeed = ref(10);
@@ -221,9 +228,10 @@ main {
         @filter="logEvent"
         @move="logEvent"
         @clone="logEvent"
+        ref="sortable"
       >
         <template #item="{ element, index }">
-          <div class="draggable" :key="element.id">
+          <div class="draggable" :key="element.id" @click="logClick">
             {{ element.text }}
             <Sortable
               v-if="element.children"
diff --git a/src/components/Sortable.vue b/src/components/Sortable.vue
index 80fc8a0..2748f91 100644
--- a/src/components/Sortable.vue
+++ b/src/components/Sortable.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, PropType, watch, onUnmounted, computed, useAttrs, Ref } from "vue";
+import { ref, PropType, watch, onUnmounted, computed, useAttrs, Ref } from "vue-demi";
 import Sortable, { SortableOptions } from "sortablejs";
 import type { AutoScrollOptions } from "sortablejs/plugins";
 
@@ -65,6 +65,7 @@ const emit = defineEmits<{
 
 const attrs = useAttrs();
 
+const isDragging = ref(false);
 const containerRef = ref<HTMLElement | null>(null);
 const sortable = ref<Sortable | null>(null);
 const getKey = computed(() => {
@@ -73,7 +74,11 @@ const getKey = computed(() => {
   return props.itemKey;
 });
 
-defineExpose({ containerRef, sortable: <Ref<Sortable | null>>sortable });
+defineExpose({
+  containerRef,
+  sortable: <Ref<Sortable | null>>sortable,
+  isDragging,
+});
 
 watch(containerRef, (newDraggable) => {
   if (newDraggable) {
@@ -81,8 +86,18 @@ watch(containerRef, (newDraggable) => {
       ...props.options,
       onChoose: (event) => emit("choose", event),
       onUnchoose: (event) => emit("unchoose", event),
-      onStart: (event) => emit("start", event),
-      onEnd: (event) => emit("end", event),
+      onStart: (event) => {
+        isDragging.value = true;
+        emit("start", event);
+      },
+      onEnd: (event) => {
+        // This is a hack to move the event to the end of the event queue.
+        // cf this issue: https://github.com/SortableJS/Sortable/issues/1184
+        setTimeout(() => {
+          isDragging.value = false;
+          emit("end", event);
+        });
+      },
       onAdd: (event) => emit("add", event),
       onUpdate: (event) => emit("update", event),
       onSort: (event) => emit("sort", event),
@@ -117,7 +132,6 @@ onUnmounted(() => {
     sortable.value = null;
   }
 });
-
 </script>
 
 <template>
diff --git a/src/main.ts b/src/main.ts
index b670de8..0745b75 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,4 +1,4 @@
-import { createApp } from "vue";
+import { createApp } from "vue-demi";
 import App from "./App.vue";
 
 createApp(App).mount("#app");
diff --git a/vite.config.ts b/vite.config.ts
index 7dfb2b8..f4784e0 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -10,6 +10,9 @@ export default defineConfig({
     preserveSymlinks: false,
   },
   logLevel: "info",
+  optimizeDeps: {
+    exclude: ['vue-demi']
+  },
   build: {
     target: "esnext",
     minify: "terser",