diff --git a/src/router/index.ts b/src/router/index.ts
index 14afeb389..6028c988f 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -249,6 +249,7 @@ const router = createRouter({
 			meta: {
 				showAsModal: true,
 			},
+			props: route => ({ namespaceId: Number(route.params.id as string) }),
 		},
 		{
 			path: '/tasks/:id',
diff --git a/src/views/namespaces/settings/archive.vue b/src/views/namespaces/settings/archive.vue
index 950c1c126..08c041b8e 100644
--- a/src/views/namespaces/settings/archive.vue
+++ b/src/views/namespaces/settings/archive.vue
@@ -22,7 +22,7 @@ export default { name: 'namespace-setting-archive' }
 </script>
 
 <script setup lang="ts">
-import {watch, reactive, ref, shallowReactive} from 'vue'
+import {watch, ref, computed, shallowReactive} from 'vue'
 import {useRouter} from 'vue-router'
 import {useStore} from '@/store'
 import {useI18n} from 'vue-i18n'
@@ -31,7 +31,6 @@ import {success} from '@/message'
 import {useTitle} from '@/composables/useTitle'
 
 import NamespaceService from '@/services/namespace'
-import type {INamespace} from '@/modelTypes/INamespace'
 import NamespaceModel from '@/models/namespace'
 
 const props = defineProps({
@@ -45,31 +44,35 @@ const store = useStore()
 const router = useRouter()
 const {t} = useI18n({useScope: 'global'})
 
-const title = ref('')
-useTitle(title)
-
 const namespaceService = shallowReactive(new NamespaceService())
-const namespace : INamespace = reactive(new NamespaceModel())
+const namespace = ref(new NamespaceModel())
 
 watch(
 	() => props.namespaceId,
 	async () => {
-		Object.assign(namespace, store.getters['namespaces/getNamespaceById'](props.namespaceId))
+		namespace.value = store.getters['namespaces/getNamespaceById'](props.namespaceId)
 
 		// FIXME: ressouce should be loaded in store
-		Object.assign(namespace, await namespaceService.get({id: props.namespaceId}))
-		title.value = namespace.isArchived ?
-				t('namespace.archive.titleUnarchive', {namespace: namespace.title}) :
-				t('namespace.archive.titleArchive', {namespace: namespace.title})
+		namespace.value = await namespaceService.get({id: props.namespaceId})
 	},
 	{ immediate: true },
 )
 
+const title = computed(() => {
+	if (!namespace.value) {
+		return
+	}
+	return namespace.value.isArchived
+		? t('namespace.archive.titleUnarchive', {namespace: namespace.value.title})
+		: t('namespace.archive.titleArchive', {namespace: namespace.value.title})
+})
+useTitle(title)
+
 async function archiveNamespace() {
 	try {
-		const isArchived = !namespace.isArchived
+		const isArchived = !namespace.value.isArchived
 		const archivedNamespace = await namespaceService.update({
-			...namespace,
+			...namespace.value,
 			isArchived,
 		})
 		store.commit('namespaces/setNamespaceById', archivedNamespace)
diff --git a/src/views/namespaces/settings/delete.vue b/src/views/namespaces/settings/delete.vue
index b778e66a7..7994af826 100644
--- a/src/views/namespaces/settings/delete.vue
+++ b/src/views/namespaces/settings/delete.vue
@@ -12,37 +12,57 @@
 	</modal>
 </template>
 
-<script lang="ts">
-import {defineComponent} from 'vue'
-import { setTitle } from '@/helpers/setTitle'
+<script lang="ts">	
+export default { name: 'namespace-setting-delete' }
+</script>
 
-export default defineComponent({
-	name: 'namespace-setting-delete',
-	computed: {
-		namespace() {
-			return this.$store.getters['namespaces/getNamespaceById'](this.$route.params.id)
-		},
-		title() {
-			if (!this.namespace) {
-				return
-			}
-			return this.$t('namespace.delete.title', {namespace: this.namespace.title})
-		},
-	},
-	watch: {
-		title: {
-			handler(title) {
-				setTitle(title)
-			},
-			immediate: true,
-		},
-	},
-	methods: {
-		async deleteNamespace() {
-			await this.$store.dispatch('namespaces/deleteNamespace', this.namespace)
-			this.$message.success({message: this.$t('namespace.delete.success')})
-			this.$router.push({name: 'home'})
-		},
+<script setup lang="ts">
+import {ref, computed, watch, shallowReactive} from 'vue'
+import {useI18n} from 'vue-i18n'
+import {useRouter} from 'vue-router'
+
+import {useStore} from '@/store'
+import {useTitle} from '@/composables/useTitle'
+import {success} from '@/message'
+import NamespaceModel from '@/models/namespace'
+import NamespaceService from '@/services/namespace'
+
+const props = defineProps({
+	namespaceId: {
+		type: Number,
+		required: true,
 	},
 })
+
+const store = useStore()
+const router = useRouter()
+const {t} = useI18n({useScope: 'global'})
+
+const namespaceService = shallowReactive(new NamespaceService())
+const namespace = ref(new NamespaceModel())
+
+watch(
+	() => props.namespaceId,
+	async () => {
+		namespace.value = store.getters['namespaces/getNamespaceById'](props.namespaceId)
+
+		// FIXME: ressouce should be loaded in store
+		namespace.value = await namespaceService.get({id: props.namespaceId})
+	},
+	{ immediate: true },
+)
+
+const title = computed(() => {
+	if (!namespace.value) {
+		return
+	}
+	return t('namespace.delete.title', {namespace: namespace.value.title})
+})
+useTitle(title)
+
+async function deleteNamespace() {
+	await store.dispatch('namespaces/deleteNamespace', namespace.value)
+	success({message: t('namespace.delete.success')})
+	router.push({name: 'home'})
+}
 </script>