diff --git a/src/shared/mixin.js b/src/shared/mixin.js
index 732234e..ef384e2 100644
--- a/src/shared/mixin.js
+++ b/src/shared/mixin.js
@@ -76,8 +76,14 @@ export default function createMixin(Vue, options) {
               if (!this.$root._vueMeta.initialized) {
                 // refresh meta in nextTick so all child components have loaded
                 this.$nextTick(function () {
-                  this.$root.$meta().refresh()
+                  const { metaInfo } = this.$root.$meta().refresh()
                   this.$root._vueMeta.initialized = true
+
+                  // add the navigation guards if they havent been added yet
+                  // they are needed for the afterNavigation callback
+                  if (!options.refreshOnceOnNavigation && metaInfo.afterNavigation) {
+                    addNavGuards(this)
+                  }
                 })
               }
             })
@@ -91,16 +97,6 @@ export default function createMixin(Vue, options) {
 
         // do not trigger refresh on the server side
         if (!this.$isServer) {
-          // add the navigation guards if they havent been added yet
-          // if metaInfo is defined as a function, this does call the computed fn redundantly
-          // but as Vue internally caches the results of computed props it shouldnt hurt performance
-          if (!options.refreshOnceOnNavigation && (
-            (this.$options[options.keyName] && this.$options[options.keyName].afterNavigation) ||
-            (this.$options.computed && this.$options.computed.$metaInfo && (this.$options.computed.$metaInfo() || {}).afterNavigation)
-          )) {
-            addNavGuards(this)
-          }
-
           // no need to add this hooks on server side
           updateOnLifecycleHook.forEach((lifecycleHook) => {
             ensuredPush(this.$options, lifecycleHook, () => triggerUpdate(this, lifecycleHook))
diff --git a/test/unit/components.test.js b/test/unit/components.test.js
index f909afe..0ead61b 100644
--- a/test/unit/components.test.js
+++ b/test/unit/components.test.js
@@ -128,7 +128,7 @@ describe('client', () => {
     expect(context._uid).toBe(wrapper.vm._uid)
   })
 
-  test('afterNavigation function is called with refreshOnce: true', () => {
+  test('afterNavigation function is called with refreshOnce: true', async () => {
     const Vue = loadVueMetaPlugin(false, { refreshOnceOnNavigation: true })
     const afterNavigation = jest.fn()
     const component = Vue.component('nav-component', {
@@ -151,6 +151,8 @@ describe('client', () => {
       }
     })
 
+    await vmTick(wrapper.vm)
+
     expect(guards.before).toBeDefined()
     expect(guards.after).toBeDefined()
 
@@ -161,7 +163,7 @@ describe('client', () => {
     expect(afterNavigation).toHaveBeenCalled()
   })
 
-  test('afterNavigation function is called with refreshOnce: false', () => {
+  test('afterNavigation function is called with refreshOnce: false', async () => {
     const Vue = loadVueMetaPlugin(false, { refreshOnceOnNavigation: false })
     const afterNavigation = jest.fn()
     const component = Vue.component('nav-component', {
@@ -184,6 +186,8 @@ describe('client', () => {
       }
     })
 
+    await vmTick(wrapper.vm)
+
     expect(guards.before).toBeDefined()
     expect(guards.after).toBeDefined()