Nuxt router does not display error page(layouts/error.vue) without refreshing a page

I have developed a nuxt router middleware which calls an api based on the dynamic route parameter. If the api returns error(404..., 500.. ) response then it displays the nuxt default layout/error page. Inside the error page we let the user redirect to home page by clicking the redirect to home button. my router middleware code is given below:

export default ({ app, store, error }) => {
  // Every time the route changes (fired on initialization too)
  app.router.beforeEach(async (to, from, next) => {
    if (to.params.bookName) {
      let params = to.params.bookName
      let bookName = name && name.replace(/\s+/g, "-").toLowerCase()
      if (bookName) {
        try {
          await store.dispatch("home/getShopDetailsByBookName", bookName)
        } catch (e) {
          error({ statusCode: e.response.status, message: "Book not found" })
        }
      }
    }
    next()
  })
}

back to home page this.$router.push("/") when user request an url with invalid name & api returns error code, nuxt initiate & shows the layout/error.vue. Now if the user clicks the back to home button & again clicks back button of the browser then instead of showing the layouts/error.vue nuxt loads the requested page. Nuxt layouts/error.vue page only loads when the requested page is refreshed but if a page is redirected by using the back button of browser instead of showing layouts/error.vue nuxt loads the requested page.