Не правильно работает fetch в nuxt

В нюкст появился обновленный fetch, который позволяет получать данные с сервера. Дак вот, у меня есть динамическая страница. Вот она:

<template>
<div>
<component 
:is="componentName"
:data="data"
/>
</div>
</template>

<script>
import Card from '@/components/main/pages/Card'
import Post from '@/components/main/pages/Post'
import Tag from '@/components/main/pages/Tag'
export default {
    components: {
        Card,
        Post,
        Tag
    },
    data() {
          return {
            data: '',
            componentName: ''
          }
     },
// Пытался с помощью created
    //  async created() {
    //     const res = await this.$store.dispatch('data/getData', this.$route.params.slug)
    //     console.log(res);
    //     this.componentName = res;
    //  },
     async beforeRouteEnter(to, from, next) {
        next(async vm => {
            const res = await vm.$store.dispatch('data/getData', to.params.slug)
            vm.componentName = res;
        })  
     }
}
</script>

При переходе на статью, идет запрос на бек и отправляет мне одну из категорий так скажем и отрисовывает нужный компонент. При отрисовке компонента, я в нем делаю запрос на сервер для получения данных:

data () {
    return {
        data: ''
    }
},
async fetch() {
  const res = await this.$axios.$get(`/api/card/${this.$route.params.slug}`)
  this.data = res
},

Я получаю данные как надо, все в порядке. Но если я посмотрю на исходный код, то там я не увижу отрендеринного компонента. Тоесть это уже не ssr, а spa. Но еще дело в том, что когда я пробую на главной странице фетчить новым способ данные, то в исходном коде данные присутствуют. Странно, чем так вообще? Тоесть когда компонент рендериться, данные приходят чуть позже и я это замечаю, т.к. вижу как компонент начинает появляться.