diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4f28341..6244810 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -111,7 +111,7 @@ importers:
         specifier: ^3.11.1
         version: 3.15.4(@parcel/watcher@2.5.1)(@types/node@18.19.76)(db0@0.2.4)(eslint@8.57.1)(ioredis@5.5.0)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.34.8)(terser@5.39.0)(typescript@5.7.3)(vite@6.1.1(@types/node@18.19.76)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(yaml@2.7.0)
       vue:
-        specifier: ^3.4.21
+        specifier: ^3.5.0
         version: 3.5.13(typescript@5.7.3)
       vue-router:
         specifier: ^4.3.0
diff --git a/src/vue/types.ts b/src/vue/types.ts
index 5303966..9b7ec8e 100644
--- a/src/vue/types.ts
+++ b/src/vue/types.ts
@@ -1,10 +1,10 @@
 import type { Ref } from "vue";
 import type { ParentConfig } from "../types";
 
-export type VueElement = HTMLElement | Ref<HTMLElement | undefined>;
+export type VueElement = HTMLElement | Ref<HTMLElement | null | undefined>;
 
 export interface VueDragAndDropData<T> extends VueParentConfig<T> {
-  parent: HTMLElement | Ref<HTMLElement | undefined>;
+  parent: VueElement;
   values: Ref<Array<T>> | Array<T>;
 }
 
diff --git a/tests/package.json b/tests/package.json
index fe2f7b1..1cd2c9f 100644
--- a/tests/package.json
+++ b/tests/package.json
@@ -12,7 +12,7 @@
   "dependencies": {
     "@nuxtjs/tailwindcss": "^6.12.1",
     "nuxt": "^3.11.1",
-    "vue": "^3.4.21",
+    "vue": "^3.5.0",
     "vue-router": "^4.3.0",
     "@formkit/drag-and-drop": "workspace:*"
   },
diff --git a/tests/pages/accessibility/index.vue b/tests/pages/accessibility/index.vue
index 98b683b..8b447a6 100644
--- a/tests/pages/accessibility/index.vue
+++ b/tests/pages/accessibility/index.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { dragAndDrop } from "../../../src/vue/index";
 
-const parent1: Ref<HTMLElement | undefined> = ref(undefined);
-const parent2: Ref<HTMLElement | undefined> = ref(undefined);
-const parent3: Ref<HTMLElement | undefined> = ref(undefined);
+const parent1 = useTemplateRef("parent1");
+const parent2 = useTemplateRef("parent2");
+const parent3 = useTemplateRef("parent3");
 
 const values1 = ref(["Apple", "Banana", "Orange"]);
 const values2 = ref(["Strawberry", "Blueberry", "Raspberry"]);
diff --git a/tests/pages/classes/index.vue b/tests/pages/classes/index.vue
index f483312..6cebdef 100644
--- a/tests/pages/classes/index.vue
+++ b/tests/pages/classes/index.vue
@@ -6,7 +6,7 @@ const options = reactive({
   synthDraggingClasss: "draggingClass",
 });
 
-const parent: Ref<HTMLElement | undefined> = ref(undefined);
+const parent = useTemplateRef("parent");
 
 const values = ref(["Apple", "Banana", "Orange"]);