Why are dynamic pages not updating?

Question

Vue.js

Good afternoon
There is a dynamic component post/_slug.vue

_slug.vue

<template lang="pug">
  .inner-wrapper
    <Breadcrumbs :labels="labels"/>
    main.main#content
      Article
        template(v-slot:title)
          h1.article__title {{ post.title }}
        template(v-slot:toc v-if="post.toc")
          Toc(:data="post.toc")
        template(v-slot:text)
          .article__text
            .container(v-html="post.text")
</template>

<script>
import Breadcrumbs from '@/components/sections/breadcrumbs';
import Article from '@/components/sections/article';
import Table from '@/components/table';
import Toc from '@/components/toc';

export default {
  validate({params}) {
    return Boolean(params.id);
  },
  data() {
    return {
      post: {},
    };
  },
  components: {
    Breadcrumbs,
    Article,
    Table,
    Toc,
    Gallery: () => import('vue-easy-lightbox'),
  },
  computed: {
    labels() {
      return {
        last: this.post.title,
      };
    },
  },
  async created() {
    const query = `
      query Articles($id: ID!) {
        article(id: $id) {
          title
          descr
          keywords
          slug
          text
        }
      }
    `;

    const responce = await this.$axios.$post(URL, {
      query,
      variables: {
        id: this.$route.params.id,
      },
      headers: {
        'content-type': 'application/json',
      },
    });

    this.post = responce.data.article;
  },
};

When you go to it from any page, everything works, but when you refresh the page, a 404 error occurs.

Answer 1

Who is throwing a 404 error? vue-router or your server? If the latter, then you need to either enable hash-mode in your vue-router, or make the server return index.html for all requests except api