feat: remove usage of .sync and define explicitly emits (#10209)

References

- https://v3-migration.vuejs.org/breaking-changes/v-model
-
https://v3-migration.vuejs.org/breaking-changes/v-on-native-modifier-removed.html

app/javascript/dashboard/components/widgets/modal/DeleteModal.vue

@@ -1,26 +1,21 @@
-<script>
+<script setup>
 import Modal from '../../Modal.vue';
 
-export default {
-  components: {
-    Modal,
-  },
-  props: {
-    show: Boolean,
-    onClose: { type: Function, default: () => {} },
-    onConfirm: { type: Function, default: () => {} },
-    title: { type: String, default: '' },
-    message: { type: String, default: '' },
-    messageValue: { type: String, default: '' },
-    confirmText: { type: String, default: '' },
-    rejectText: { type: String, default: '' },
-  },
-};
+defineProps({
+  onClose: { type: Function, default: () => {} },
+  onConfirm: { type: Function, default: () => {} },
+  title: { type: String, default: '' },
+  message: { type: String, default: '' },
+  messageValue: { type: String, default: '' },
+  confirmText: { type: String, default: '' },
+  rejectText: { type: String, default: '' },
+});
+
+const show = defineModel('show', { type: Boolean, default: false });
 </script>
 
-<!-- eslint-disable vue/no-mutating-props -->
 <template>
-  <Modal :show.sync="show" :on-close="onClose">
+  <Modal v-model:show="show" :on-close="onClose">
     <woot-modal-header
       :header-title="title"
       :header-content="message"