feat: use defineComponent wrapper

src/components/base/BaseButton.vue

@@ -11,10 +11,12 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
+
 // see https://v3.vuejs.org/api/sfc-script-setup.html#usage-alongside-normal-script
-export default {
+export default defineComponent({
   inheritAttrs: false,
-}
+})
 </script>
 
 <script lang="ts" setup>

src/components/home/navigation.vue

@@ -157,6 +157,8 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
+
 import {mapState} from 'vuex'
 import draggable from 'vuedraggable'
 
@@ -169,7 +171,7 @@ import {CURRENT_LIST, MENU_ACTIVE, LOADING, LOADING_MODULE} from '@/store/mutati
 import {calculateItemPosition} from '@/helpers/calculateItemPosition'
 
 
-export default {
+export default defineComponent({
 	name: 'navigation',
 
 	components: {
@@ -285,7 +287,7 @@ export default {
 			}
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>

src/components/home/update.vue

@@ -8,7 +8,9 @@
 </template>
 
 <script lang="ts">
-export default {
+import {defineComponent} from 'vue'
+
+export default defineComponent({
 	name: 'update',
 	data() {
 		return {
@@ -45,7 +47,7 @@ export default {
 			this.registration.waiting.postMessage('skipWaiting')
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>

src/components/input/button.vue

@@ -18,9 +18,11 @@
 </template>
 
 <script lang="ts">
-export default {
+import {defineComponent} from 'vue'
+
+export default defineComponent({
 	name: 'x-button',
-}
+})
 </script>
 
 <script setup lang="ts">

src/components/input/colorPicker.vue

@@ -35,6 +35,8 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
+
 import {createRandomID} from '@/helpers/randomId'
 
 const DEFAULT_COLORS = [
@@ -46,7 +48,7 @@ const DEFAULT_COLORS = [
 	'#00db60',
 ]
 
-export default {
+export default defineComponent({
 	name: 'colorPicker',
 	data() {
 		return {
@@ -105,7 +107,7 @@ export default {
 			this.update(true)
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>

src/components/input/datepicker.vue

@@ -111,6 +111,8 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
+
 import flatPickr from 'vue-flatpickr-component'
 import 'flatpickr/dist/flatpickr.css'
 import { i18n } from '@/i18n'
@@ -121,7 +123,7 @@ import {calculateNearestHours} from '@/helpers/time/calculateNearestHours'
 import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
 import {createDateFromString} from '@/helpers/time/createDateFromString'
 
-export default {
+export default defineComponent({
 	name: 'datepicker',
 	data() {
 		return {
@@ -249,7 +251,7 @@ export default {
 			return format(newDate, 'E')
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>

src/components/input/editor.vue

@@ -43,6 +43,8 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
+
 import VueEasymde from './vue-easymde/vue-easymde.vue'
 import {marked} from 'marked'
 import DOMPurify from 'dompurify'
@@ -55,7 +57,7 @@ import AttachmentService from '../../services/attachment'
 import {findCheckboxesInText} from '../../helpers/checklistFromText'
 import {createRandomID} from '@/helpers/randomId'
 
-export default {
+export default defineComponent({
 	name: 'editor',
 	components: {
 		VueEasymde,
@@ -304,7 +306,7 @@ export default {
 			}
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss">

src/components/input/fancycheckbox.vue

@@ -20,9 +20,11 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
+
 import {createRandomID} from '@/helpers/randomId'
 
-export default {
+export default defineComponent({
 	name: 'fancycheckbox',
 	data() {
 		return {
@@ -57,7 +59,7 @@ export default {
 			this.$emit('change', checked)
 		},
 	},
-}
+})
 </script>
 
 

src/components/input/multiselect.vue

@@ -83,10 +83,11 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
 import {i18n} from '@/i18n'
 import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
 
-export default {
+export default defineComponent({
 	name: 'multiselect',
 	data() {
 		return {
@@ -366,7 +367,7 @@ export default {
 			this.$refs.searchInput.focus()
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>

src/components/input/vue-easymde/vue-easymde.vue

@@ -10,10 +10,12 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
+
 import EasyMDE from 'easymde'
 import {marked} from 'marked'
 
-export default {
+export default defineComponent({
   name: 'vue-easymde',
   props: {
     modelValue: String,
@@ -143,7 +145,7 @@ export default {
       }
     },
   },
-}
+})
 </script>
 
 <style lang="scss" scoped>

src/components/list/partials/filter-popup.vue

@@ -28,12 +28,14 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
+
 import Filters from '@/components/list/partials/filters'
 import Popup from '@/components/misc/popup'
 
 import {getDefaultParams} from '@/composables/taskList'
 
-export default {
+export default defineComponent({
 	name: 'filter-popup',
 	components: {
 		Popup,
@@ -85,7 +87,7 @@ export default {
 			this.value = {...getDefaultParams()}
 		},
 	},
-}
+})
 </script>
 
 <style scoped lang="scss">

src/components/list/partials/filters.vue

@@ -175,6 +175,8 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
+
 import DatepickerWithRange from '@/components/date/datepickerWithRange'
 import Fancycheckbox from '../../input/fancycheckbox'
 
@@ -223,7 +225,7 @@ const DEFAULT_FILTERS = {
 
 export const ALPHABETICAL_SORT = 'title'
 
-export default {
+export default defineComponent({
 	name: 'filters',
 	components: {
 		DatepickerWithRange,
@@ -573,7 +575,7 @@ export default {
 			this.setSingleValueFilter('labels', 'labels', '', 'in')
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>

src/components/misc/create-edit.vue

@@ -41,49 +41,45 @@
 	</modal>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { i18n } from '@/i18n'
 
-export default {
-	name: 'create-edit',
-	props: {
-		title: {
-			type: String,
-			default: '',
-		},
-		primaryLabel: {
-			type: String,
-			default() {
-				return i18n.global.t('misc.create')
-			},
-		},
-		primaryIcon: {
-			type: String,
-			default: 'plus',
-		},
-		primaryDisabled: {
-			type: Boolean,
-			default: false,
-		},
-		tertiary: {
-			type: String,
-			default: '',
-		},
-		wide: {
-			type: Boolean,
-			default: false,
-		},
-		loading: {
-			type: Boolean,
-			default: false,
+defineProps({
+	title: {
+		type: String,
+		default: '',
+	},
+	primaryLabel: {
+		type: String,
+		default() {
+			return i18n.global.t('misc.create')
 		},
 	},
-	emits: ['create', 'primary', 'tertiary'],
-	methods: {
-		primary() {
-			this.$emit('create')
-			this.$emit('primary')
-		},
+	primaryIcon: {
+		type: String,
+		default: 'plus',
 	},
+	primaryDisabled: {
+		type: Boolean,
+		default: false,
+	},
+	tertiary: {
+		type: String,
+		default: '',
+	},
+	wide: {
+		type: Boolean,
+		default: false,
+	},
+	loading: {
+		type: Boolean,
+		default: false,
+	},
+})
+const emit = defineEmits(['create', 'primary', 'tertiary'])
+
+function primary() {
+	emit('create')
+	emit('primary')
 }
 </script>

src/components/misc/dropdown.vue

@@ -16,9 +16,10 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
 import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
 
-export default {
+export default defineComponent({
 	name: 'dropdown',
 	data() {
 		return {
@@ -55,5 +56,5 @@ export default {
 			})
 		},
 	},
-}
+})
 </script>

src/components/misc/nothing.vue

@@ -2,10 +2,4 @@
 	<p class="has-text-centered has-text-grey is-italic p-4 mb-4">
 		<slot></slot>
 	</p>
-</template>
-
-<script lang="ts">
-export default {
-	name: 'nothing',
-}
-</script>
+</template>

src/components/misc/notification.vue

@@ -37,12 +37,6 @@
 	</notifications>
 </template>
 
-<script lang="ts">
-export default {
-	name: 'notification',
-}
-</script>
-
 <style scoped>
 .vue-notification {
 	z-index: 9999;

src/components/notifications/notifications.vue

@@ -48,6 +48,8 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
+
 import NotificationService from '@/services/notification'
 import User from '@/components/misc/user.vue'
 import names from '@/models/constants/notificationNames.json'
@@ -56,7 +58,7 @@ import {mapState} from 'vuex'
 
 const LOAD_NOTIFICATIONS_INTERVAL = 10000
 
-export default {
+export default defineComponent({
 	name: 'notifications',
 	components: {User},
 	data() {
@@ -131,7 +133,7 @@ export default {
 			}
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>

src/components/quick-actions/quick-actions.vue

@@ -53,6 +53,8 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
+
 import TaskService from '@/services/task'
 import TeamService from '@/services/team'
 
@@ -82,7 +84,7 @@ const SEARCH_MODE_TASKS = 'tasks'
 const SEARCH_MODE_LISTS = 'lists'
 const SEARCH_MODE_TEAMS = 'teams'
 
-export default {
+export default defineComponent({
 	name: 'quick-actions',
 	components: {QuickAddMagic},
 	data() {
@@ -480,7 +482,7 @@ export default {
 			this.selectedCmd = null
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>

src/components/sharing/linkSharing.vue

@@ -176,6 +176,8 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
+
 import rights from '../../models/constants/rights'
 
 import LinkShareService from '../../services/linkShare'
@@ -184,7 +186,7 @@ import LinkShareModel from '../../models/linkShare'
 import copy from 'copy-to-clipboard'
 import {mapState} from 'vuex'
 
-export default {
+export default defineComponent({
 	name: 'linkSharing',
 	props: {
 		listId: {
@@ -256,7 +258,7 @@ export default {
 			return this.frontendUrl + 'share/' + hash + '/auth'
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>

src/components/sharing/userTeam.vue

@@ -131,6 +131,8 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
+
 import UserNamespaceService from '../../services/userNamespace'
 import UserNamespaceModel from '../../models/userNamespace'
 import UserListModel from '../../models/userList'
@@ -149,7 +151,7 @@ import rights from '../../models/constants/rights.json'
 import Multiselect from '@/components/input/multiselect.vue'
 import Nothing from '@/components/misc/nothing.vue'
 
-export default {
+export default defineComponent({
 	name: 'userTeamShare',
 	props: {
 		type: {
@@ -363,7 +365,7 @@ export default {
 			this.found = []
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>

src/components/tasks/edit-task.vue

@@ -76,6 +76,8 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
+
 import AsyncEditor from '@/components/input/AsyncEditor'
 
 import TaskService from '../../services/task'
@@ -85,7 +87,7 @@ import EditLabels from './partials/editLabels'
 import Reminders from './partials/reminders'
 import ColorPicker from '../input/colorPicker'
 
-export default {
+export default defineComponent({
 	name: 'edit-task',
 	data() {
 		return {
@@ -151,7 +153,7 @@ export default {
 			this.$message.success({message: this.$t('task.detail.updateSuccess')})
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>

src/components/tasks/gantt-component.vue

@@ -171,6 +171,8 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
+
 import VueDragResize from 'vue-drag-resize'
 import EditTask from './edit-task'
 
@@ -185,7 +187,7 @@ import FilterPopup from '@/components/list/partials/filter-popup.vue'
 
 import {colorIsDark} from '@/helpers/color/colorIsDark'
 
-export default {
+export default defineComponent({
 	name: 'GanttChart',
 	components: {
 		FilterPopup,
@@ -435,7 +437,7 @@ export default {
 			return this.format(date, 'MMMM, yyyy')
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>

src/components/tasks/partials/attachments.vue

@@ -136,6 +136,8 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
+
 import AttachmentService from '../../../services/attachment'
 import AttachmentModel from '../../../models/attachment'
 import User from '../../misc/user'
@@ -144,7 +146,7 @@ import copy from 'copy-to-clipboard'
 
 import { uploadFiles, generateAttachmentUrl } from '@/helpers/attachments'
 
-export default {
+export default defineComponent({
 	name: 'attachments',
 	components: {
 		User,
@@ -247,7 +249,7 @@ export default {
 			copy(generateAttachmentUrl(this.taskId, attachment.id))
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>

src/components/tasks/partials/checklist-summary.vue

@@ -12,9 +12,11 @@
 </template>
 
 <script lang="ts">
-import {getChecklistStatistics} from '../../../helpers/checklistFromText'
+import {defineComponent} from 'vue'
 
-export default {
+import {getChecklistStatistics} from '@/helpers/checklistFromText'
+
+export default defineComponent({
 	name: 'checklist-summary',
 	props: {
 		task: {
@@ -34,7 +36,7 @@ export default {
 			return ((100 - progress) / 100) * c
 		},
 	},
-}
+})
 </script>
 
 <style scoped lang="scss">

src/components/tasks/partials/comments.vue

@@ -152,6 +152,8 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
+
 import AsyncEditor from '@/components/input/AsyncEditor'
 
 import TaskCommentService from '../../../services/taskComment'
@@ -159,7 +161,7 @@ import TaskCommentModel from '../../../models/taskComment'
 import {uploadFile} from '@/helpers/attachments'
 import {mapState} from 'vuex'
 
-export default {
+export default defineComponent({
 	name: 'comments',
 	components: {
 		Editor: AsyncEditor,
@@ -302,7 +304,7 @@ export default {
 			}
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>

src/components/tasks/partials/date-table-cell.vue

@@ -6,14 +6,11 @@
 	</td>
 </template>
 
-<script lang="ts">
-export default {
-	name: 'date-table-cell',
-	props: {
-		date: {
-			type: Date,
-			default: 0,
-		},
+<script setup lang="ts">
+defineProps({
+	date: {
+		type: Date,
+		default: 0,
 	},
-}
+})
 </script>

src/components/tasks/partials/defer-task.vue

@@ -38,10 +38,12 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
+
 import TaskService from '../../../services/task'
 import flatPickr from 'vue-flatpickr-component'
 
-export default {
+export default defineComponent({
 	name: 'defer-task',
 	data() {
 		return {
@@ -129,7 +131,7 @@ export default {
 			this.$emit('update:modelValue', task)
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>

src/components/tasks/partials/description.vue

@@ -30,12 +30,14 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
+
 import AsyncEditor from '@/components/input/AsyncEditor'
 
 import {LOADING} from '@/store/mutation-types'
 import {mapState} from 'vuex'
 
-export default {
+export default defineComponent({
 	name: 'description',
 	components: {
 		Editor: AsyncEditor,
@@ -86,6 +88,6 @@ export default {
 			}
 		},
 	},
-}
+})
 </script>
 

src/components/tasks/partials/editAssignees.vue

@@ -28,6 +28,7 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
 import {includesById} from '@/helpers/utils'
 import UserModel from '../../../models/user'
 import ListUserService from '../../../services/listUsers'
@@ -35,7 +36,7 @@ import TaskAssigneeService from '../../../services/taskAssignee'
 import User from '../../misc/user'
 import Multiselect from '@/components/input/multiselect.vue'
 
-export default {
+export default defineComponent({
 	name: 'editAssignees',
 	components: {
 		User,
@@ -115,7 +116,7 @@ export default {
 			this.$refs.multiselect.focus()
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>

src/components/tasks/partials/editLabels.vue

@@ -39,13 +39,14 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
 import LabelModel from '../../../models/label'
 import LabelTaskService from '../../../services/labelTask'
 
 import Multiselect from '@/components/input/multiselect.vue'
 import {LOADING, LOADING_MODULE} from '@/store/mutation-types'
 
-export default {
+export default defineComponent({
 	name: 'edit-labels',
 	props: {
 		modelValue: {
@@ -141,7 +142,7 @@ export default {
 		},
 
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>

src/components/tasks/partials/heading.vue

@@ -26,11 +26,12 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
 import {mapState} from 'vuex'
 
 import Done from '@/components/misc/Done.vue'
 
-export default {
+export default defineComponent({
 	name: 'heading',
 	components: {
 		Done,
@@ -92,7 +93,7 @@ export default {
 			}
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>

src/components/tasks/partials/kanban-card.vue

@@ -66,6 +66,8 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
+
 import {playPop} from '../../../helpers/playPop'
 import PriorityLabel from '../../../components/tasks/partials/priorityLabel'
 import User from '../../../components/misc/user'
@@ -75,7 +77,7 @@ import ChecklistSummary from './checklist-summary'
 
 import {colorIsDark} from '@/helpers/color/colorIsDark'
 
-export default {
+export default defineComponent({
 	name: 'kanban-card',
 	components: {
 		ChecklistSummary,
@@ -124,7 +126,7 @@ export default {
 			})
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>

src/components/tasks/partials/labels.vue

@@ -10,15 +10,12 @@
 	</div>
 </template>
 
-<script lang="ts">
-export default {
-	name: 'labels',
-	props: {
-		labels: {
-			required: true,
-		},
+<script setup lang="ts">
+defineProps({
+	labels: {
+		required: true,
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>

src/components/tasks/partials/percentDoneSelect.vue

@@ -17,7 +17,8 @@
 </template>
 
 <script lang="ts">
-export default {
+import {defineComponent} from 'vue'
+export default defineComponent({
 	name: 'percentDoneSelect',
 	props: {
 		modelValue: {
@@ -40,5 +41,5 @@ export default {
 			},
 		},
 	},
-}
+})
 </script>

src/components/tasks/partials/priorityLabel.vue

@@ -20,31 +20,23 @@
 	</span>
 </template>
 
-<script lang="ts">
-import priorites from '../../../models/constants/priorities'
-
-export default {
-	name: 'priorityLabel',
-	data() {
-		return {
-			priorities: priorites,
-		}
+<script setup lang="ts">
+import priorities from '@/models/constants/priorities'
+	
+defineProps({
+	priority: {
+		default: 0,
+		type: Number,
 	},
-	props: {
-		priority: {
-			default: 0,
-			type: Number,
-		},
-		showAll: {
-			type: Boolean,
-			default: false,
-		},
-		done: {
-			type: Boolean,
-			default: false,
-		},
+	showAll: {
+		type: Boolean,
+		default: false,
 	},
-}
+	done: {
+		type: Boolean,
+		default: false,
+	},
+})
 </script>
 
 <style lang="scss" scoped>

src/components/tasks/partials/prioritySelect.vue

@@ -12,9 +12,10 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
 import priorites from '../../../models/constants/priorities'
 
-export default {
+export default defineComponent({
 	name: 'prioritySelect',
 	data() {
 		return {
@@ -47,5 +48,5 @@ export default {
 			this.$emit('change')
 		},
 	},
-}
+})
 </script>

src/components/tasks/partials/quick-add-magic.vue

@@ -88,8 +88,9 @@
 <script lang="ts">
 import {getQuickAddMagicMode} from '@/helpers/quickAddMagicMode'
 import {PREFIXES} from '@/modules/parseTaskText'
+import { defineComponent } from 'vue'
 
-export default {
+export default defineComponent({
 	name: 'quick-add-magic',
 	data() {
 		return {
@@ -105,5 +106,5 @@ export default {
 			return PREFIXES[this.mode]
 		},
 	},
-}
+})
 </script>

src/components/tasks/partials/relatedTasks.vue

@@ -135,6 +135,8 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
+
 import TaskService from '../../../services/task'
 import TaskModel from '../../../models/task'
 import TaskRelationService from '../../../services/taskRelation'
@@ -143,7 +145,7 @@ import TaskRelationModel from '../../../models/taskRelation'
 
 import Multiselect from '@/components/input/multiselect.vue'
 
-export default {
+export default defineComponent({
 	name: 'relatedTasks',
 	data() {
 		return {
@@ -307,7 +309,7 @@ export default {
 				})
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>

src/components/tasks/partials/reminders.vue

@@ -26,9 +26,11 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
+
 import datepicker from '@/components/input/datepicker.vue'
 
-export default {
+export default defineComponent({
 	name: 'reminders',
 	data() {
 		return {
@@ -102,7 +104,7 @@ export default {
 			this.updateData()
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>

src/components/tasks/partials/repeatAfter.vue

@@ -51,9 +51,10 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
 import repeatModes from '@/models/constants/taskRepeatModes'
 
-export default {
+export default defineComponent({
 	name: 'repeatAfter',
 	data() {
 		return {
@@ -102,7 +103,7 @@ export default {
 			this.updateData()
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>

src/components/tasks/partials/singleTaskInList.vue

@@ -92,6 +92,8 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
+
 import TaskModel from '../../../models/task'
 import PriorityLabel from './priorityLabel'
 import TaskService from '../../../services/task'
@@ -103,7 +105,7 @@ import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
 import {playPop} from '@/helpers/playPop'
 import ChecklistSummary from './checklist-summary'
 
-export default {
+export default defineComponent({
 	name: 'singleTaskInList',
 	data() {
 		return {
@@ -221,7 +223,7 @@ export default {
 			})
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>