Migrate Checkbox component to setup syntax

client/src/components/ui/BaseInput.vue

@@ -1,5 +1,9 @@
 <template>
-  <label class="base-input-container">
+  <label
+    :data-checked="checked"
+    data-cy="base-input-container"
+    class="base-input-container"
+  >
     <input
       :checked="checked"
       type="checkbox"
@@ -33,24 +37,19 @@
   </label>
 </template>
 
-<script>
+<script setup lang="ts">
 import { defineAsyncComponent } from 'vue';
+
+export interface Props {
+  label: string;
+  checked: boolean;
+  item: any;
+  type: string;
+}
+
 const Tick = defineAsyncComponent(() => import('@/components/icons/Tick.vue'));
 const CircleIcon = defineAsyncComponent(() => import('@/components/icons/CircleIcon.vue'));
 
-export default {
-  props: {
-    label: String,
-    checked: {
-      type: Boolean,
-    },
-    item: Object,
-    type: String,
-  },
-
-  components: {
-    Tick,
-    CircleIcon,
-  },
-};
+defineProps<Props>();
+defineEmits(['input']);
 </script>

client/src/components/ui/Checkbox.vue

@@ -10,26 +10,17 @@
   </base-input>
 </template>
 
-<script>
+<script setup lang="ts">
 import BaseInput from '@/components/ui/BaseInput.vue';
+export interface Props {
+  label: string;
+  checked: boolean;
+  item: any;
+}
 
-export default {
-  props: {
-    label: String,
-    checked: {
-      type: Boolean,
-    },
-    item: Object,
-  },
-
-  components: {
-    BaseInput,
-  },
-
-  methods: {
-    passOn() {
-      this.$emit('input', ...arguments);
-    },
-  },
+defineProps<Props>();
+const emit = defineEmits(['input']);
+const passOn = (checked: boolean) => {
+  emit('input', checked);
 };
 </script>