diff --git a/ui/src/views/AutogenView.vue b/ui/src/views/AutogenView.vue
index 5baedfa6605..856eba64e1c 100644
--- a/ui/src/views/AutogenView.vue
+++ b/ui/src/views/AutogenView.vue
@@ -308,14 +308,39 @@ export default {
       return this.selectedRowKeys.length > 0
     }
   },
+  beforeCreate () {
+    this.form = this.$form.createForm(this)
+  },
   mounted () {
+    this.currentPath = this.$route.fullPath
     this.fetchData()
   },
+  beforeRouteUpdate (to, from, next) {
+    this.currentPath = this.$route.fullPath
+    next()
+  },
+  beforeRouteLeave (to, from, next) {
+    this.currentPath = this.$route.fullPath
+    next()
+  },
   watch: {
     '$route' (to, from) {
-      if (to.fullPath !== from.fullPath && !to.fullPath.includes('action/')) {
-        this.page = 1
+      // The route config creates two groups of section components one for each
+      // related paths. Once these two groups of components are mounted, on
+      // route changes this method is called twice causing multiple API calls.
+      // The following fixes this issue by using logical XOR to identify the
+      // current component against related `to` route and the path the component
+      // was in and only calls fetchData if `to` route and currentPath are of
+      // the same group of routes.
+
+      const related = ['/project', '/event', '/dashboard']
+      const toPath = related.map(o => to.fullPath.includes(o)).includes(true)
+      const inPath = related.map(o => this.currentPath.includes(o)).includes(true)
+      this.needToFetchData = ((toPath ^ inPath) === 0)
+      if (this.needToFetchData && to.fullPath !== from.fullPath && !to.fullPath.includes('action/')) {
         this.searchQuery = ''
+        this.page = 1
+        this.itemCount = 0
         this.fetchData()
       }
     },
@@ -325,9 +350,6 @@ export default {
       }
     }
   },
-  beforeCreate () {
-    this.form = this.$form.createForm(this)
-  },
   methods: {
     fetchData () {
       if (this.routeName !== this.$route.name) {