[1551] aysnc auth middleware keeps flipping out upon logout

I'm trying the concept of auth middleware that first goes after the store, and then an endpoint to verify/refresh the logged in user:

So my middleware/auth.js is as so:

export default async function (ctx) {
  if (ctx.store.state.user) {
    return true
  } else {
    try {
      const result = await ctx.app.$axios.get('/me?json=true')
      if (result.data.data) {
        ctx.store.commit('SET_USER', result.data.data)
        return true
      }
    } catch (e) {
      ctx.redirect('/')
      return true
    }
  }
}

My problem is when I Logout and then redirect the user to the front page via the way I found to do it in issue via this.$router.replace({path: '/'}) I get this endless loop:

here is my logout method:

    logout () {
      this.$axios
        .get('/logout')
        .then((response) => {
          this.$store.commit('SET_USER', null)
          this.$refs.toast.add({type: 'info', title: 'Authentication', body: 'Logout Successful'})
          this.$router.replace({path: '/'})
          // this.$router.go('/')
        })
    },

P.S. any tips on how I can handle things smoother please let me know!