[2247] How to handle errors with Dynamic pages and when asyncData hit 404 API response?

Hi there. I am trying to make error handling with custom error page, but this is not working in my case.

I have dynamic Page Components

asyncData ({ app, params, store }) {
    return app.$axios.get(`${process.env.baseUrl}/articles/${params.section}`)
      .then((res) => {
        store.commit('setArticles', res.data)
        return { error: false }
      })
      .catch((err) => {
        return { error: err.response.status }
      })
  }

Folder structure like this

pages
  _section
  index.vue

When I hit non existed section route I want to show error page. I have an error returned from API server, but Nuxt is not catching it!

Error page

<template>
  <section class="viewport content">
    <div class="container">
      <div class="row center-xs">
        <div class="col-xs-12">
          <h1 v-if="error.statusCode === 404">404</h1>
          <h1 v-else>An error occured</h1>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  props: ['error'],
  transition: 'page'
}
</script>