[989] Nux Generate is putting default data on dynamic routes and lagging the load

I'm loading data from an API and generating dynamic routes for each id getted from API, all is working like expected but all the generated pages is builded with some default data. Example, if i have an area with {{data.name}}, this area will be filled with some name during the generate build, and when i load the page, it will show first the default text and a second after the page shows the right text. It is not a static behavior, cause the page is getting the right text async for some reason, and until the real text is not getted, the page shows some arbitrary text. It is a bug or a feature?

my code is:

// nuxt.config.js

generate: {
    routes: function () {
      return axios.get('http://rest.bandsintown.com/artists/u2/events?app_id=apptest')
        .then(res => {
          return res.data.map(item => {
            return {
              route: '/posts/' + item.id,
              payload: item
            }
          })
        })
    }
 }

// Dynamic route

<template>
  <section class="container">
    <div>
      <p>
        {{data.id}} - {{data.venue.name}}
      </p>
    </div>
  </section>
</template>

<script>
/* eslint-disable */
import axios from 'axios'

export default {
  components: {},
  async asyncData({ params, error, payload }) {
    if (payload) {
      return {
        data: payload
      }
    } else {
      let { data } = await axios.get(`http://rest.bandsintown.com/artists/u2/events/${params.id}?app_id=apptest`)
      return {
        data: data
      }
    }
  }
}
</script>

Video showing the behavior

Image (Red is the default text and Blue is the right text that i need the page load), i dont know why the Red text exists inside the page, that is the problem that i'm trying to explain here.