use the new Composition API for Dropdown and Modal components

stubs/inertia/resources/js/Jetstream/Dropdown.vue

@@ -29,6 +29,8 @@
 </template>
 
 <script>
+import {onMounted, onUnmounted, ref} from "vue";
+
     export default {
         props: {
             align: {
@@ -42,30 +44,21 @@
             }
         },
 
-        data() {
-            return {
-                open: false
-            }
-        },
+        setup() {
+            let open = ref(false)
 
-        created() {
             const closeOnEscape = (e) => {
-                if (this.open && e.keyCode === 27) {
-                    this.open = false
+                if (open.value && e.keyCode === 27) {
+                    open.value = false
                 }
             }
 
-            document.addEventListener('keydown', closeOnEscape)
-        },
+            onMounted(() => document.addEventListener('keydown', closeOnEscape))
+            onUnmounted(() => document.removeEventListener('keydown', closeOnEscape))
 
-        unmounted() {
-            const closeOnEscape = (e) => {
-                if (this.open && e.keyCode === 27) {
-                    this.open = false
-                }
+            return {
+                open,
             }
-
-            document.removeEventListener('keydown', closeOnEscape)
         },
 
         computed: {
@@ -74,7 +67,6 @@
                     '48': 'w-48',
                 }[this.width.toString()]
             },
-
             alignmentClasses() {
                 if (this.align === 'left') {
                     return 'origin-top-left left-0'

stubs/inertia/resources/js/Jetstream/Modal.vue

@@ -29,7 +29,9 @@
 </template>
 
 <script>
-    export default {
+import {onMounted, onUnmounted} from "vue";
+
+export default {
         emits: ['close'],
 
         props: {
@@ -44,14 +46,6 @@
             },
         },
 
-        methods: {
-            close() {
-                if (this.closeable) {
-                    this.$emit('close')
-                }
-            }
-        },
-
         watch: {
             show: {
                 immediate: true,
@@ -65,14 +59,25 @@
             }
         },
 
-        created() {
+        setup(props, {emit}) {
+            const close = () => {
+                if (props.closeable) {
+                    emit('close')
+                }
+            }
+
             const closeOnEscape = (e) => {
-                if (e.key === 'Escape' && this.show) {
-                    this.close()
+                if (e.key === 'Escape' && props.show) {
+                    close()
                 }
             }
 
-            document.addEventListener('keydown', closeOnEscape)
+            onMounted(() => document.addEventListener('keydown', closeOnEscape))
+            onUnmounted(() => document.removeEventListener('keydown', closeOnEscape))
+
+            return {
+                close,
+            }
         },
 
         computed: {