chore: composition api on some pages

pages/index.vue

@@ -13,16 +13,14 @@
   </NuxtLayout>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 import Logo from '~/components/Logo.vue'
 import ArrowRight from '~/components/icons/ArrowRight.vue'
+import {useRouter} from "nuxt/app";
+const router = useRouter();
 
-export default {
-  components: {Logo, ArrowRight},
-  methods: {
-    goSettings() {
-      this.$router.push('/settings');
-    }
-  }
+let goSettings = ():void => {
+  router.push({name:'settings'})
 }
+
 </script>

pages/settings.vue

@@ -11,30 +11,22 @@
   </NuxtLayout>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 import Wave from '~/components/icons/Wave.vue'
 import Single from "~/components/Single.vue";
 import {onMounted} from "@vue/runtime-core";
 import {useRouter} from "nuxt/app";
+import {ref} from "@vue/reactivity";
+import {Ref} from "vue";
+const router = useRouter()
 
-export default {
-  async setup() {
-    const router = useRouter();
+onMounted(() => {
+  router.push('/settings/difficulty');
+})
 
-    onMounted(() => {
-      router.push('/settings/difficulty');
-    })
-  },
-  components: {Wave, Single},
-  data() {
-    return {
-      progress_percent: 0
-    }
-  },
-  methods: {
-    changeProgress(value : number) {
-      this.progress_percent = value;
-    }
-  }
+let progress_percent: Ref<Number> = ref(0)
+
+let changeProgress = (value: Number) => {
+  return progress_percent.value = value
 }
 </script>

pages/settings/difficulty.vue

@@ -26,30 +26,22 @@
       </ul>
 </template>
 
-<script lang="ts">
-import {Single} from "#components";
+<script lang="ts" setup>
 import {useGameStore} from "~/store/game";
 import waveAnimation from "~/compositions/animations/wave";
 import {Difficult} from "../../types/global";
+import { defineEmits } from 'vue'
+import {useRouter} from "nuxt/app";
+const emit = defineEmits(['progress'])
+const router = useRouter()
+const gameStore = useGameStore()
 
-export default {
-  emits: ['progress'],
-  async setup(props, {emit}) {
-    const gameStore = useGameStore()
+emit('progress', 0)
+await waveAnimation();
 
-    emit("progress", 0)
+let choiceDifficulty = (difficulty: Difficult) => {
+  gameStore.setDifficulty(difficulty)
+  router.push('/settings/questions_number')
 
-    await waveAnimation();
-
-    return { gameStore }
-  },
-  components: {Single},
-  methods: {
-    async choiceDifficulty(difficulty: Difficult) {
-      this.gameStore.setDifficulty(difficulty)
-
-      this.$router.push('/settings/questions_number');
-    },
-  },
 }
 </script>