Refactor: Switch Settings index page to setup sugar (#8374)

* refactor(client): Make Settings index page use <script setup>

* chore(client): address review comments

packages/client/src/pages/settings/index.vue

@@ -22,8 +22,8 @@
 </MkSpacer>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
-import { computed, defineAsyncComponent, defineComponent, nextTick, onMounted, reactive, ref, watch } from 'vue';
+import { computed, defineAsyncComponent, nextTick, onMounted, ref, watch } from 'vue';
 import { i18n } from '@/i18n';
 import MkInfo from '@/components/ui/info.vue';
 import MkSuperMenu from '@/components/ui/super-menu.vue';
@@ -34,20 +34,10 @@ import * as symbols from '@/symbols';
 import { instance } from '@/instance';
 import { $i } from '@/account';
 
-export default defineComponent({
+const props = defineProps<{
-	components: {
+  initialPage?: string
-		MkInfo,
+}>();
-		MkSuperMenu,
-	},
 
-	props: {
-		initialPage: {
-			type: String,
-			required: false
-		}
-	},
-
-	setup(props, context) {
 const indexInfo = {
 	title: i18n.ts.settings,
 	icon: 'fas fa-cog',
@@ -58,7 +48,7 @@ export default defineComponent({
 const page = ref(props.initialPage);
 const narrow = ref(false);
 const view = ref(null);
-		const el = ref(null);
+const el = ref<HTMLElement | null>(null);
 const childInfo = ref(null);
 const menuDef = computed(() => [{
 	title: i18n.ts.basicSettings,
@@ -255,20 +245,8 @@ export default defineComponent({
 	childInfo.value = page[symbols.PAGE_INFO];
 };
 
-		return {
+defineExpose({
 	[symbols.PAGE_INFO]: INFO,
-			page,
-			menuDef,
-			narrow,
-			view,
-			el,
-			pageProps,
-			component,
-			emailNotConfigured,
-			pageChanged,
-			childInfo,
-		};
-	},
 });
 </script>