diff --git a/src/models/abstractModel.ts b/src/models/abstractModel.ts
index 202ccde9..fbf074e2 100644
--- a/src/models/abstractModel.ts
+++ b/src/models/abstractModel.ts
@@ -5,15 +5,13 @@ export default class AbstractModel {
 
 	/**
 	 * The max right the user has on this object, as returned by the x-max-right header from the api.
-	 * @type {number|null}
 	 */
-	maxRight = null
+	maxRight: number | null = null
 
 	/**
 	 * The abstract constructor takes an object and merges its data with the default data of this model.
-	 * @param data
 	 */
-	constructor(data) {
+	constructor(data : Object = {}) {
 		data = objectToCamelCase(data)
 
 		// Put all data in our model while overriding those with a value of null or undefined with their defaults
@@ -26,9 +24,8 @@ export default class AbstractModel {
 
 	/**
 	 * Default attributes that define the "empty" state.
-	 * @return {{}}
 	 */
-	defaults() {
+	defaults(): Object {
 		return {}
 	}
 }
\ No newline at end of file
diff --git a/src/models/caldavToken.js b/src/models/caldavToken.js
deleted file mode 100644
index 2d7a4ebd..00000000
--- a/src/models/caldavToken.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import AbstractModel from './abstractModel'
-
-export default class CaldavTokenModel extends AbstractModel {
-	constructor(data) {
-		super(data)
-		this.created = new Date(this.created)
-	}
-
-	defaults() {
-		return {
-			id: 0,
-			created: null,
-		}
-	}
-}
\ No newline at end of file
diff --git a/src/models/caldavToken.ts b/src/models/caldavToken.ts
new file mode 100644
index 00000000..9ecf2232
--- /dev/null
+++ b/src/models/caldavToken.ts
@@ -0,0 +1,14 @@
+import AbstractModel from './abstractModel'
+
+export default class CaldavTokenModel extends AbstractModel {
+	id = 0
+	created : undefined | Date = undefined
+
+	constructor(data? : Object) {
+		super(data)
+
+		if (this.created) {
+			this.created = new Date(this.created)
+		}
+	}
+}
\ No newline at end of file
diff --git a/src/views/user/settings/Caldav.vue b/src/views/user/settings/Caldav.vue
index 6c663d8a..ec68c8a4 100644
--- a/src/views/user/settings/Caldav.vue
+++ b/src/views/user/settings/Caldav.vue
@@ -67,7 +67,7 @@
 
 <script lang="ts" setup>
 import copy from 'copy-to-clipboard'
-import {computed, ref} from 'vue'
+import {computed, ref, shallowReactive} from 'vue'
 import {useI18n} from 'vue-i18n'
 import {useStore} from 'vuex'
 
@@ -79,43 +79,31 @@ import Message from '@/components/misc/message.vue'
 import CaldavTokenService from '@/services/caldavToken'
 import CaldavTokenModel from '@/models/caldavToken'
 
-const service = new CaldavTokenService()
-
-function useTokens(): ref<CaldavTokenModel[]> {
-	const tokens = ref<CaldavTokenModel[]>([])
-	service.getAll()
-		.then((t: CaldavTokenModel[]) => {
-			tokens.value = t
-		})
-	return tokens
-}
-
-const tokens = useTokens()
-
-const store = useStore()
 const {t} = useI18n()
-
 useTitle(() => `${t('user.settings.caldav.title')} - ${t('user.settings.title')}`)
 
-const caldavUrl = computed(() => `${store.getters['config/apiBase']}/dav/principals/${store.state.auth.info.username}/`)
-const caldavEnabled = computed(() => store.state.config.caldavEnabled)
-const isLocalUser = computed(() => store.state.auth.info?.isLocalUser)
-const username = computed(() => store.state.auth.info?.username)
+const service = shallowReactive(new CaldavTokenService())
+const tokens = ref<CaldavTokenModel[]>([])
 
-const newToken = ref(null)
+service.getAll().then((result: CaldavTokenModel[]) => {
+	tokens.value = result
+})
 
+const newToken = ref<CaldavTokenModel>()
 async function createToken() {
-	newToken.value = await service.create({})
+	newToken.value = await service.create() as CaldavTokenModel
 	tokens.value.push(newToken.value)
 }
 
 async function deleteToken(token: CaldavTokenModel) {
 	const r = await service.delete(token)
-	const i = tokens.value.findIndex(v => v.id === token.id)
-	if (i === -1) {
-		return
-	}
-	tokens.value.splice(i, 1)
+	tokens.value = tokens.value.filter(({id}) => id !== token.id)
 	success(r)
 }
+
+const store = useStore()
+const username = computed(() => store.state.auth.info?.username)
+const caldavUrl = computed(() => `${store.getters['config/apiBase']}/dav/principals/${username.value}/`)
+const caldavEnabled = computed(() => store.state.config.caldavEnabled)
+const isLocalUser = computed(() => store.state.auth.info?.isLocalUser)
 </script>