setup syntax

packages/client/src/pages/my-groups/group.vue

@@ -35,45 +35,24 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, defineComponent } from 'vue';
+import { computed, watch } from 'vue';
 import MkButton from '@/components/MkButton.vue';
-import { definePageMetadata } from '@/scripts/page-metadata';\
+import { definePageMetadata } from '@/scripts/page-metadata';
 import { i18n } from '@/i18n';
 import * as os from '@/os';
 
-export default defineComponent({
-	components: {
-		MkButton,
-	},
-
-	props: {
+const props = defineProps<{
 	groupId: {
 			type: String,
 			required: true,
 		},
-	},
+}>();
 
-	data() {
-		return {
-			[Symbol('Page info')]: computed(() => this.group ? {
-				title: this.group.name,
-				icon: 'fas fa-users',
-			} : null),
-			group: null,
-			users: [],
-		};
-	},
+watch(() => props.groupId, () => {
+	fetch();
+});
 
-	watch: {
-		groupId: 'fetch',
-	},
-
-	created() {
-		this.fetch();
-	},
-
-	methods: {
-		fetch() {
+function fetch() {
 	os.api('users/groups/show', {
 		groupId: this.groupId
 	}).then(group => {
@@ -84,9 +63,9 @@ export default defineComponent({
 			this.users = users;
 		});
 	});
-		},
+}
 
-		invite() {
+function invite() {
 	os.selectUser().then(user => {
 		os.apiWithDialog('users/groups/invite', {
 			groupId: this.group.id,
@@ -95,7 +74,7 @@ export default defineComponent({
 	});
 },
 
-		removeUser(user) {
+function removeUser(user) {
 	os.api('users/groups/pull', {
 		groupId: this.group.id,
 		userId: user.id
@@ -104,7 +83,7 @@ export default defineComponent({
 	});
 },
 
-		async renameGroup() {
+async function renameGroup() {
 	const { canceled, result: name } = await os.inputText({
 		title: this.$ts.groupName,
 		default: this.group.name
@@ -119,7 +98,7 @@ export default defineComponent({
 	this.group.name = name;
 },
 
-		transfer() {
+function transfer() {
 	os.selectUser().then(user => {
 		os.apiWithDialog('users/groups/transfer', {
 			groupId: this.group.id,
@@ -128,7 +107,7 @@ export default defineComponent({
 	});
 },
 
-		async deleteGroup() {
+async function deleteGroup() {
 	const { canceled } = await os.confirm({
 		type: 'warning',
 		text: this.$t('removeAreYouSure', { x: this.group.name }),
@@ -140,8 +119,6 @@ export default defineComponent({
 	});
 	this.$router.push('/my/groups');
 }
-	}
-});
 
 definePageMetadata(computed(() => ({
 	title: i18n.ts.members,