diff --git a/package-lock.json b/package-lock.json
index 76869f1..9a1dc45 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -35,7 +35,7 @@
         "vue-meta": "^3.0.0-alpha.2",
         "vue-notion": "^3.0.0-beta.1",
         "vue-router": "^4.2.5",
-        "vue-signature-pad": "^2.0.5",
+        "vue-signature-pad": "^3.0.2",
         "vue2-editor": "^2.10.3",
         "vue3-vt-notifications": "^1.0.0",
         "vuedraggable": "^4.1.0",
@@ -13667,35 +13667,18 @@
       }
     },
     "node_modules/vue-signature-pad": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/vue-signature-pad/-/vue-signature-pad-2.0.5.tgz",
-      "integrity": "sha512-FLvJRmhSP/DVkg0W/tGcPZ4D0ZQlFxHgN1mjph6jt/59yLeTSv0zGGU133lfq9CkYMQ5DqN6rWujjL7Gnx7UPA==",
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/vue-signature-pad/-/vue-signature-pad-3.0.2.tgz",
+      "integrity": "sha512-o25o+lROfCmzASS2+fU8ZV801kV+D4/02zkZ+ez3NKeiUmbxW7kwlUf5oKQkvA+l7Ou9xGsGLsirBLch3jyX8A==",
       "dependencies": {
         "merge-images": "^1.1.0",
-        "signature_pad": "^3.0.0-beta.3",
-        "vue": "^2.6.14"
+        "signature_pad": "^3.0.0-beta.3"
       },
       "engines": {
         "node": ">=12"
-      }
-    },
-    "node_modules/vue-signature-pad/node_modules/@vue/compiler-sfc": {
-      "version": "2.7.15",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-2.7.15.tgz",
-      "integrity": "sha512-FCvIEevPmgCgqFBH7wD+3B97y7u7oj/Wr69zADBf403Tui377bThTjBvekaZvlRr4IwUAu3M6hYZeULZFJbdYg==",
-      "dependencies": {
-        "@babel/parser": "^7.18.4",
-        "postcss": "^8.4.14",
-        "source-map": "^0.6.1"
-      }
-    },
-    "node_modules/vue-signature-pad/node_modules/vue": {
-      "version": "2.7.15",
-      "resolved": "https://registry.npmjs.org/vue/-/vue-2.7.15.tgz",
-      "integrity": "sha512-a29fsXd2G0KMRqIFTpRgpSbWaNBK3lpCTOLuGLEDnlHWdjB8fwl6zyYZ8xCrqkJdatwZb4mGHiEfJjnw0Q6AwQ==",
-      "dependencies": {
-        "@vue/compiler-sfc": "2.7.15",
-        "csstype": "^3.1.0"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
       }
     },
     "node_modules/vue-style-loader": {
diff --git a/resources/js/components/forms/SignatureInput.vue b/resources/js/components/forms/SignatureInput.vue
index f333a79..16e1f99 100644
--- a/resources/js/components/forms/SignatureInput.vue
+++ b/resources/js/components/forms/SignatureInput.vue
@@ -7,7 +7,8 @@
     </template>
 
     <VueSignaturePad ref="signaturePad"
-                     :class="[theme.default.input,{ '!ring-red-500 !ring-2': hasValidation && form.errors.has(name), '!cursor-not-allowed !bg-gray-200':disabled }]" height="150px"
+                     :class="[theme.default.input,{ '!ring-red-500 !ring-2': hasValidation && form.errors.has(name), '!cursor-not-allowed !bg-gray-200':disabled }]"
+                     height="150px"
                      :name="name"
                      :options="{ onEnd }"
     />
@@ -30,14 +31,14 @@
 <script>
 import { inputProps, useFormInput } from './useFormInput.js'
 import InputWrapper from './components/InputWrapper.vue'
-import VueSignaturePad from 'vue-signature-pad'
+import { VueSignaturePad } from 'vue-signature-pad'
 
 export default {
   name: 'SignatureInput',
-  components: {InputWrapper, VueSignaturePad},
+  components: { InputWrapper, VueSignaturePad },
 
   props: {
-    ...inputProps,
+    ...inputProps
   },
 
   setup (props, context) {
diff --git a/resources/js/components/open/forms/fields/components/FieldOptions.vue b/resources/js/components/open/forms/fields/components/FieldOptions.vue
index c0b505f..12509d0 100644
--- a/resources/js/components/open/forms/fields/components/FieldOptions.vue
+++ b/resources/js/components/open/forms/fields/components/FieldOptions.vue
@@ -208,10 +208,10 @@
       </v-checkbox>
       <template v-if="field.type === 'phone_number' && !field.use_simple_text_input">
         <select-input v-model="field.unavailable_countries" class="mt-4" wrapper-class="relative"
-                  :options="allCountries" :multiple="true"
-                  :searchable="true" :search-keys="['name']" :option-key="'code'" :emit-key="'code'"
-                  label="Disabled countries" :placeholder="'Select a country'"
-                  help="Remove countries from the phone input"
+                      :options="allCountries" :multiple="true"
+                      :searchable="true" :search-keys="['name']" :option-key="'code'" :emit-key="'code'"
+                      label="Disabled countries" :placeholder="'Select a country'"
+                      help="Remove countries from the phone input"
         >
           <template #selected="{option, selected}">
             <div class="flex items-center space-x-2 justify-center overflow-hidden">
@@ -243,7 +243,7 @@
       <!-- Pre-fill depends on type -->
       <v-checkbox v-if="field.type=='checkbox'" v-model="field.prefill" class="mt-3"
                   :name="field.id+'_prefill'"
-                  @update:model-value="field.prefill =$event"
+                  @update:model-value="field.prefill = $event"
       >
         Pre-filled value
       </v-checkbox>