Ссылка на страницу в папке страниц из компонента в nuxt

Question

У меня есть текстовый проект. Я хочу связать страницу P1, которая находится в папке страниц, с другой страницы P2. Страница P1 имеет компонент, и через этот компонент P2 связывается.

P1

<template>
  <div class="columns">
      <div v-for="(p, index) in story" :key="index">
        <nuxt-link :to="'/post/' +p.slug">
            <MoreStories :story="p"/>
        </nuxt-link>
      </div>
  </div>
</template>

<script>
import axios from 'axios';
import MoreStories from '~/components/MoreStories';
export default {
  components: {
    MoreStories
  },
  data() {
    return {
      story: null
    };
  },
  async asyncData() {
    // THIS IS FOR REPRESENTATION PURPOSE ONLY
    const sortedStories = await axios.get(`https://getData/`).then(response => response.data).catch(err => console.log(err));
    return {
      story: sortedStories
    };
  }
};
</script>

Компонент MoreStories.vue

<template>
    <div v-if="story.authors">
        BY
        <span v-for="(author, index) in story.authors" :key="index" >
        <nuxt-link :to="'/author/' + author.slug">
            {{ author.display_name }}
        </nuxt-link>
        <span v-if="index != story.authors.length -1"> , </span>
        </span>
    </div>
</template>
<script>
export default {
  props: {
    story: {
      type: Object,
      required: true,
      default: null
    }
  }
}
</script>

P2:

<template>
  <div class="columns">
      <div v-for="(p, index) in story" :key="index">
        <nuxt-link :to="'/post/' +p.slug">
            <MoreStories :story="p"/>
        </nuxt-link>
      </div>
  </div>
</template>

<script>
import axios from 'axios';
import MoreStories from '~/components/MoreStories';
export default {
  components: {
    MoreStories,
  },
  data() {
    return {
      story: null
    };
  },
  async asyncData() {
    // THIS IS FOR REPRESENTATION PURPOSE ONLY
    const sortedStories = await axios.get(`https://getDataFromSomeOtherLink/`).then(response => response.data).catch(err => console.log(err));
    return {
      story: sortedStories
    };
  }
  }
};
</script>

Структура проекта выглядит следующим образом:

components/
--| MoreStories.vue
pages/
--| index.vue
--| authors
----| index.vue
--| post
----| index.vue

Здесь P1 - это страницы / index.vue или pages / post / index.vue, а P2 - это страницы / авторы / index.vue

Используемый компонент - MoreStories.vue

Страница по-прежнему не загружается нормально, даже если мы не используем компонент и вместо этого копируем весь код компонента на самой странице. Выдает эту ошибку:

[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.

Эта ошибка вызывает у меня проблемы при рендеринге страниц в производстве. Как устранить эту ошибку? Спасибо!