can someone help me?

I have such a dynamic page
on the host the page opens upon click, but after the refresh I get 404

pages/blog/[slug].vue

<script setup>
import { useBlogStore } from '@/store/blog-store';
import { computed, onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();
const route = useRoute();
const blogStore = useBlogStore();
const article = computed(() => blogStore.articles.find(a => a.slug === route.params.slug));
const newArticle = ref(null);

const loading = ref(false);

onMounted(() => {
  getData();
});

const getData = () => {
  loading.value = true;
  console.log(route.params.slug);
  blogStore.fetchArticle(window.location.pathname.replace(/^/blog//, '')).then((res) => {
    newArticle.value = res;
  }).catch((error) => {
    console.error('Error fetching article:', error);
  }).finally(() => {
    loading.value = false;
  });
};

store

import { defineStore } from 'pinia';
import { ref } from 'vue';
import { useApi } from '@/boot/axios2.js';

export const useBlogStore = defineStore('blog', () => {
  const { api } = useApi();
  const newArticles = ref([]);
  const articles = ref([]);

  const fetchArticle = async (slug) => {
    try {
      const response = await api.get(`blog/entry/${slug}`);
      return response.data;
    } catch (error) {
      throw error;
    }
  };

  return {
    newArticles,
    articles,
    fetchArticle
  };
});

The page address does not change but the page does not open after refresh.
In my localhost everything works without problems too