monitor update in background

src/components/ApacheRestartMonitor.vue

@@ -1,7 +1,7 @@
 <template>
   <transition name="bounce">
     <div
-      v-if="isApacheNeedRestart || isApacheRestartPending"
+      v-if="isActive"
       class="
         container
         d-flex
@@ -54,14 +54,44 @@
 import { mapGetters, mapActions } from "vuex";
 
 export default {
-  computed: mapGetters([
+  data: () => ({
+    is_locked: false,
+  }),
+  computed: {
+    ...mapGetters([
       "isApacheNeedRestart",
       "isApacheRestartPending",
       "isApacheRestartFlagSent",
     ]),
-  methods: mapActions(["updateApacheRestartFlag", "fetchApacheRestartFlag"]),
-  async updated() {
-    this.fetchApacheRestartFlag();
+    isActive() {
+      return this.isApacheNeedRestart || this.isApacheRestartPending;
+    },
+  },
+  methods: {
+    ...mapActions(["updateApacheRestartFlag", "fetchApacheRestartFlag"]),
+    async monitor_status() {
+      if (this.is_locked) return;
+      this.is_locked = true;
+
+      while (this.isActive) {
+        await new Promise((resolve) => setTimeout(resolve, 2000));
+        await this.fetchApacheRestartFlag();
+      }
+
+      this.is_locked = false;
+    },
+  },
+  watch: {
+    "$store.getters.isApacheNeedRestart": function () {
+      this.monitor_status();
+    },
+    "$store.getters.isApacheRestartPending": function () {
+      this.monitor_status();
+    },
+  },
+  async mounted() {
+    if (this.isActive) await this.monitor_status();
+    else await this.fetchApacheRestartFlag();
   },
 };
 </script>

src/store/modules/apache_restart.js

@@ -4,7 +4,7 @@ import config from "@/config.js";
 
 const api_base = config.api;
 
-const pass = (some) => some
+const pass = () => {};
 
 export default {
   state: {
@@ -48,7 +48,7 @@ export default {
         ctx.commit("setApacheRestartFlag", true);
         ctx.commit("setApacheRestartFlagSent", true);
       } catch (err) {
-        pass()
+        pass();
       }
     },
   },