diff --git a/src/features/kanban/TaskCard.vue b/src/features/kanban/TaskCard.vue
index 5041b50f3..d29ad62ef 100644
--- a/src/features/kanban/TaskCard.vue
+++ b/src/features/kanban/TaskCard.vue
@@ -65,68 +65,64 @@
 	</div>
 </template>
 
-<script lang="ts">
-import {defineComponent} from 'vue'
+<script lang="ts" setup>
+import {PropType, ref} from 'vue'
+import {useStore} from 'vuex'
 
-import {playPop} from '../../helpers/playPop'
 import PriorityLabel from '@/components/tasks/partials/priorityLabel.vue'
 import User from '@/components/misc/user.vue'
 import Done from '@/components/misc/Done.vue'
 import Labels from '@/components/tasks/partials/labels.vue'
 import ChecklistSummary from '@/components/tasks/partials/checklist-summary.vue'
 
+import {playPop} from '@/helpers/playPop'
 import {colorIsDark} from '@/helpers/color/colorIsDark'
+import {useRouter} from 'vue-router'
 
-export default defineComponent({
-	name: 'kanban-card',
-	components: {
-		ChecklistSummary,
-		Done,
-		PriorityLabel,
-		User,
-		Labels,
+import TaskModel from '@/models/task'
+
+// this was called 'kanban-card'
+
+const loadingInternal = ref(false)
+
+const store = useStore()
+const router = useRouter()
+
+const props = defineProps({
+	task: {
+		type: Object as PropType<TaskModel>,
+		required: true,
 	},
-	data() {
-		return {
-			loadingInternal: false,
-		}
-	},
-	props: {
-		task: {
-			required: true,
-		},
-		loading: {
-			type: Boolean,
-			required: false,
-			default: false,
-		},
-	},
-	methods: {
-		colorIsDark,
-		async toggleTaskDone(task) {
-			this.loadingInternal = true
-			try {
-				const done = !task.done
-				await this.$store.dispatch('tasks/update', {
-					...task,
-					done,
-				})
-				if (done) {
-					playPop()
-				}
-			} finally {
-				this.loadingInternal = false
-			}
-		},
-		openTaskDetail() {
-			this.$router.push({
-				name: 'task.detail',
-				params: { id: this.task.id },
-				state: { backdropView: this.$router.currentRoute.value.fullPath },
-			})
-		},
+	loading: {
+		type: Boolean,
+		required: false,
+		default: false,
 	},
 })
+
+async function toggleTaskDone(task: TaskModel) {
+	loadingInternal.value = true
+	try {
+		const done = !props.task.done
+		await store.dispatch('tasks/update', {
+			...task,
+			done,
+		})
+		if (done) {
+			playPop()
+		}
+	} finally {
+		loadingInternal.value = false
+	}
+}
+
+function openTaskDetail() {
+	router.push({
+		name: 'task.detail',
+		params: { id: props.task.id },
+		state: { backdropView: router.currentRoute.value.fullPath },
+	})
+}
 </script>
 
 <style lang="scss" scoped>