diff --git a/src/helpers/time/parseDateOrString.ts b/src/helpers/time/parseDateOrString.ts
index 48dc97aee..ac44a925c 100644
--- a/src/helpers/time/parseDateOrString.ts
+++ b/src/helpers/time/parseDateOrString.ts
@@ -1,4 +1,4 @@
-export function parseDateOrString(rawValue: string, fallback: any) {
+export function parseDateOrString(rawValue: string, fallback: any): string | Date {
 	if (typeof rawValue === 'undefined') {
 		return fallback
 	}
diff --git a/src/views/tasks/ShowTasks.vue b/src/views/tasks/ShowTasks.vue
index 832887ec0..35c9e7417 100644
--- a/src/views/tasks/ShowTasks.vue
+++ b/src/views/tasks/ShowTasks.vue
@@ -37,197 +37,183 @@
 		<div v-else :class="{ 'is-loading': loading}" class="spinner"></div>
 	</div>
 </template>
-<script>
-import {dateRanges} from '@/components/date/dateRanges'
-import SingleTaskInList from '@/components/tasks/partials/singleTaskInList'
-import {parseDateOrString} from '@/helpers/time/parseDateOrString'
-import {mapState} from 'vuex'
 
-import Fancycheckbox from '@/components/input/fancycheckbox'
+<script setup lang="ts">
+import {dateRanges} from '@/components/date/dateRanges'
+import SingleTaskInList from '@/components/tasks/partials/singleTaskInList.vue'
+import {parseDateOrString} from '@/helpers/time/parseDateOrString'
+import {mapState, useStore} from 'vuex'
+import {computed, ref, watchEffect} from 'vue'
+
+import Fancycheckbox from '@/components/input/fancycheckbox.vue'
 import {LOADING, LOADING_MODULE} from '@/store/mutation-types'
 
 import LlamaCool from '@/assets/llama-cool.svg?component'
-import DatepickerWithRange from '@/components/date/datepickerWithRange'
+import DatepickerWithRange from '@/components/date/datepickerWithRange.vue'
+import TaskModel from '@/models/task'
+import {useRoute, useRouter} from 'vue-router'
+import {formatDate} from '@/helpers/time/formatDate'
+import {useI18n} from 'vue-i18n'
+import {setTitle} from './helpers/setTitle'
 
 function getNextWeekDate() {
 	return new Date((new Date()).getTime() + 7 * 24 * 60 * 60 * 1000)
 }
 
-export default {
-	name: 'ShowTasks',
-	components: {
-		DatepickerWithRange,
-		Fancycheckbox,
-		SingleTaskInList,
-		LlamaCool,
-	},
-	data() {
-		return {
-			tasks: [],
-			showNothingToDo: false,
-		}
-	},
-	props: {
-		showAll: Boolean,
-	},
-	created() {
-		this.loadPendingTasks()
-	},
-	mounted() {
-		setTimeout(() => this.showNothingToDo = true, 100)
-	},
-	watch: {
-		'$route': {
-			handler: 'loadPendingTasks',
-			deep: true,
-		},
-	},
-	computed: {
-		dateFrom() {
-			return parseDateOrString(this.$route.query.from, new Date())
-		},
-		dateTo() {
-			return parseDateOrString(this.$route.query.to, getNextWeekDate())
-		},
-		showNulls() {
-			return this.$route.query.showNulls === 'true'
-		},
-		showOverdue() {
-			return this.$route.query.showOverdue === 'true'
-		},
-		pageTitle() {
-			let title = ''
+const store = useStore()
+const route = useRoute()
+const router = useRouter()
+const {t} = useI18n()
 
-			// We need to define "key" because it is the first parameter in the array and we need the second
-			// eslint-disable-next-line no-unused-vars
-			const predefinedRange = Object.entries(dateRanges).find(([key, value]) => this.dateFrom === value[0] && this.dateTo === value[1])
-			if (typeof predefinedRange !== 'undefined') {
-				title = this.$t(`input.datepickerRange.ranges.${predefinedRange[0]}`)
-			} else {
-				title = this.showAll
-					? this.$t('task.show.titleCurrent')
-					: this.$t('task.show.fromuntil', {
-						from: this.format(this.dateFrom, 'PPP'),
-						until: this.format(this.dateTo, 'PPP'),
-					})
-			}
+const tasks = ref<TaskModel[]>([])
+const showNothingToDo = ref<boolean>(false)
 
-			this.setTitle(title)
+setTimeout(() => showNothingToDo.value = true, 100)
 
-			return title
-		},
-		tasksSorted() {
-			// Sort all tasks to put those with a due date before the ones without a due date, the
-			// soonest before the later ones.
-			// We can't use the api sorting here because that sorts tasks with a due date after
-			// ones without a due date.
+const props = defineProps({
+	showAll: Boolean,
+})
 
-			const tasksWithDueDate = [...this.tasks]
-				.filter(t => t.dueDate !== null)
-				.sort((a, b) => {
-					const sortByDueDate = a.dueDate - b.dueDate
-					return sortByDueDate === 0
-						? b.id - a.id
-						: sortByDueDate
-				})
-			const tasksWithoutDueDate = [...this.tasks]
-				.filter(t => t.dueDate === null)
+const dateFrom = computed<Date | string>(() => parseDateOrString(route.query.from as string, new Date()))
+const dateTo = computed<Date | string>(() => parseDateOrString(route.query.to as string, getNextWeekDate()))
+const showNulls = computed(() => route.query.showNulls === 'true')
+const showOverdue = computed(() => route.query.showOverdue === 'true')
+const pageTitle = computed(() => {
+	let title = ''
 
-			return [
-				...tasksWithDueDate,
-				...tasksWithoutDueDate,
-			]
-		},
-		hasTasks() {
-			return this.tasks && this.tasks.length > 0
-		},
-		...mapState({
-			userAuthenticated: state => state.auth.authenticated,
-			loading: state => state[LOADING] && state[LOADING_MODULE] === 'tasks',
-		}),
-	},
-	methods: {
-		setDate({dateFrom, dateTo}) {
-			this.$router.push({
-				name: this.$route.name,
-				query: {
-					from: dateFrom ?? this.dateFrom,
-					to: dateTo ?? this.dateTo,
-					showOverdue: this.showOverdue,
-					showNulls: this.showNulls,
-				},
+	// We need to define "key" because it is the first parameter in the array and we need the second
+	// eslint-disable-next-line no-unused-vars
+	const predefinedRange = Object.entries(dateRanges).find(([key, value]) => dateFrom.value === value[0] && dateTo.value === value[1])
+	if (typeof predefinedRange !== 'undefined') {
+		title = t(`input.datepickerRange.ranges.${predefinedRange[0]}`)
+	} else {
+		title = props.showAll
+			? t('task.show.titleCurrent')
+			: t('task.show.fromuntil', {
+				from: formatDate(dateFrom.value, 'PPP'),
+				until: formatDate(dateTo.value, 'PPP'),
 			})
-		},
-		setShowOverdue(show) {
-			this.$router.push({
-				name: this.$route.name,
-				query: {
-					...this.$route.query,
-					showOverdue: show,
-				},
-			})
-		},
-		setShowNulls(show) {
-			this.$router.push({
-				name: this.$route.name,
-				query: {
-					...this.$route.query,
-					showNulls: show,
-				},
-			})
-		},
-		async loadPendingTasks() {
-			// Since this route is authentication only, users would get an error message if they access the page unauthenticated.
-			// Since this component is mounted as the home page before unauthenticated users get redirected
-			// to the login page, they will almost always see the error message.
-			if (!this.userAuthenticated) {
-				return
-			}
+	}
 
-			const params = {
-				sort_by: ['due_date', 'id'],
-				order_by: ['desc', 'desc'],
-				filter_by: ['done'],
-				filter_value: [false],
-				filter_comparator: ['equals'],
-				filter_concat: 'and',
-				filter_include_nulls: this.showNulls,
-			}
+	return title
+})
+const tasksSorted = computed(() => {
+	// Sort all tasks to put those with a due date before the ones without a due date, the
+	// soonest before the later ones.
+	// We can't use the api sorting here because that sorts tasks with a due date after
+	// ones without a due date.
 
-			if (!this.showAll) {
-				params.filter_by.push('due_date')
-				params.filter_value.push(this.dateTo)
-				params.filter_comparator.push('less')
+	const tasksWithDueDate = [...tasks.value]
+		.filter(t => t.dueDate !== null)
+		.sort((a, b) => {
+			const sortByDueDate = a.dueDate - b.dueDate
+			return sortByDueDate === 0
+				? b.id - a.id
+				: sortByDueDate
+		})
+	const tasksWithoutDueDate = [...tasks.value]
+		.filter(t => t.dueDate === null)
 
-				// NOTE: Ideally we could also show tasks with a start or end date in the specified range, but the api
-				//       is not capable (yet) of combining multiple filters with 'and' and 'or'.
+	return [
+		...tasksWithDueDate,
+		...tasksWithoutDueDate,
+	]
+})
+const hasTasks = computed(() => tasks && tasks.value.length > 0)
+const userAuthenticated = computed(() => store.state.auth.authenticated)
+const loading = computed(() => store.state[LOADING] && store.state[LOADING_MODULE] === 'tasks')
 
-				if (!this.showOverdue) {
-					params.filter_by.push('due_date')
-					params.filter_value.push(this.dateFrom)
-					params.filter_comparator.push('greater')
-				}
-			}
-
-			this.tasks = await this.$store.dispatch('tasks/loadTasks', params)
-		},
-
-		// FIXME: this modification should happen in the store
-		updateTasks(updatedTask) {
-			for (const t in this.tasks) {
-				if (this.tasks[t].id === updatedTask.id) {
-					this.tasks[t] = updatedTask
-					// Move the task to the end of the done tasks if it is now done
-					if (updatedTask.done) {
-						this.tasks.splice(t, 1)
-						this.tasks.push(updatedTask)
-					}
-					break
-				}
-			}
-		},
-	},
+interface dateStrings {
+	from: string,
+	to: string,
 }
+
+function setDate({from, to}: dateStrings) {
+	router.push({
+		name: route.name as string,
+		query: {
+			from: from ?? dateFrom,
+			to: to ?? dateTo,
+			showOverdue: showOverdue.value ? 'true' : 'false',
+			showNulls: showNulls.value ? 'true' : 'false',
+		},
+	})
+}
+
+function setShowOverdue(show: boolean) {
+	router.push({
+		name: route.name as string,
+		query: {
+			...route.query,
+			showOverdue: show ? 'true' : 'false',
+		},
+	})
+}
+
+function setShowNulls(show: boolean) {
+	router.push({
+		name: route.name as string,
+		query: {
+			...route.query,
+			showNulls: show ? 'true' : 'false',
+		},
+	})
+}
+
+async function loadPendingTasks(from:string, to:string) {
+	// Since this route is authentication only, users would get an error message if they access the page unauthenticated.
+	// Since this component is mounted as the home page before unauthenticated users get redirected
+	// to the login page, they will almost always see the error message.
+	if (!userAuthenticated) {
+		return
+	}
+
+	const params = {
+		sort_by: ['due_date', 'id'],
+		order_by: ['desc', 'desc'],
+		filter_by: ['done'],
+		filter_value: ['false'],
+		filter_comparator: ['equals'],
+		filter_concat: 'and',
+		filter_include_nulls: showNulls.value,
+	}
+
+	if (!props.showAll) {
+		params.filter_by.push('due_date')
+		params.filter_value.push(to)
+		params.filter_comparator.push('less')
+
+		// NOTE: Ideally we could also show tasks with a start or end date in the specified range, but the api
+		//       is not capable (yet) of combining multiple filters with 'and' and 'or'.
+
+		if (!showOverdue.value) {
+			params.filter_by.push('due_date')
+			params.filter_value.push(from)
+			params.filter_comparator.push('greater')
+		}
+	}
+
+	tasks.value = await store.dispatch('tasks/loadTasks', params)
+}
+
+// FIXME: this modification should happen in the store
+function updateTasks(updatedTask) {
+	for (const t in tasks.value) {
+		if (tasks.value[t].id === updatedTask.id) {
+			tasks.value[t] = updatedTask
+			// Move the task to the end of the done tasks if it is now done
+			if (updatedTask.done) {
+				tasks.value.splice(t, 1)
+				tasks.value.push(updatedTask)
+			}
+			break
+		}
+	}
+}
+
+watchEffect(() => loadPendingTasks(dateFrom.value as string, dateTo.value as string))
+// loadPendingTasks()
+watchEffect(() => setTitle(pageTitle))
 </script>
 
 <style lang="scss" scoped>