Unify Vue coding style

[NingW101]

As we are composition API with Single-File Components(SFC), <script setup> is strongly recommended for a more succinct and ergonomic syntax.

In the code base, most of vue components use SFC + <script setup> but there are still a few components that don't follow it. Although this does not affect functionality, it's better to modify them to achieve a unified coding style.

For example,

// <Footer.vue>
<script lang="ts">
import { defineComponent, reactive, toRefs, onMounted, watch } from "vue";
import { useRouter } from "vue-router";
import { NavItem } from "../common/types";

export default defineComponent({
  name: "FooterComp",

  setup() {}
});

Some references:

• https://vuejs.org/api/composition-api-setup.html#basic-usage
• https://vuejs.org/api/sfc-spec.html
• https://vuejs.org/api/sfc-script-setup.html