faet(compete): Trigger fetchData on socket notification

src/modules/03_recruiting/views/01_compete/Period.vue

@@ -1,7 +1,7 @@
 <!-- page:จัดการรอบการสอบ สรรหา -->
 <script setup lang="ts">
 import type { QTableProps } from "quasar";
-import { onMounted, ref } from "vue";
+import { onMounted, ref, watch } from "vue";
 import { useRouter } from "vue-router";
 import { useQuasar } from "quasar";
 import genReport from "@/plugins/genreport";
@@ -12,6 +12,8 @@ import { checkPermission } from "@/utils/permissions";
 import { useCounterMixin } from "@/stores/mixin";
 import { calculateFiscalYear } from "@/utils/function";
 import { useUploadProgressStore } from "@/stores/uploadProgress";
+import { useSocketStore } from "@/stores/socket";
+import { storeToRefs } from "pinia";
 
 import type { Pagination } from "@/modules/03_recruiting/interface/index/Main";
 import type {
@@ -39,6 +41,9 @@ const {
 
 const router = useRouter();
 const uploadProgress = useUploadProgressStore();
+const socketStore = useSocketStore();
+const { notificationCounter } = storeToRefs(socketStore);
+
 const name = ref<string>("");
 const year = ref<number>(calculateFiscalYear(new Date()) + 543);
 const order = ref<number>(1);
@@ -680,6 +685,11 @@ onMounted(async () => {
   hideLoader();
   await fetchData();
 });
+
+/** Watch notification counter on socket */
+watch(notificationCounter, () => {
+  fetchData();
+});
 </script>
 
 <template>