I’m working on a multilingual blog using Nuxt 3, and I’m experiencing an issue where the article content updates correctly when the language is changed, but the slug in the route does not update accordingly. Here’s an overview of my setup:

Route Parameter and API Fetching: I’m fetching blog content using the slug from the route and the current language from the locale:

const { data: response, refresh } = await useFetch(
  `${baseApiUrl}/blog/${route.params.slug}/${locale.value}`,
  {
    key: `blog-${route.params.slug}-${locale.value}`,
    cache: 'no-store',
    transform: (response) => {
      if (!response || !response.data) {
        throw new Error('Invalid response format');
      }
      return response;
    },
  }
);

Content Update: When the API response is received, the content updates via processBlogData and processContent functions.
3 .Language Change Behavior: I use Vue I18n for localization, and the article content is correctly fetched in the new language when locale changes. However, the slug in the URL remains the same.

Expected Behavior: When the language is changed, the slug in the URL should update to match the slug for the selected language (e.g., /en/my-article to /es/mi-articulo).
Problem Despite the correct article being loaded, the slug in the URL does not change. For example:

Initial URL: https://example.com/en/my-article After language switch to Spanish: https://example.com/es/my-article (Expected: https://example.com/es/mi-articulo)

1 . Using router.push: I attempted to programmatically update the URL when the language changes: router.push({ name: 'blog-slug', params: { slug: updatedSlug } });

Watching the locale or route: I tried to watch the locale and update the route accordingly:

watch(() => locale.value, (newLocale) => { const newSlug = getSlugForLocale(newLocale); router.push({ name: 'blog-slug', params: { slug: newSlug } }); });

However, this approach either triggers a full page reload or doesn’t correctly synchronize with the language change.

Here’s a simplified version of my blog component:

<script setup>
import { ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';

const router = useRouter();
const route = useRoute();
const { locale } = useI18n();

const blogSlug = ref('');
const blogTitle = ref('');

const fetchBlogContent = async () => {
  const response = await useFetch(
    `${baseApiUrl}/blog/${route.params.slug}/${locale.value}`
  );
  blogSlug.value = response.data.slug;
  blogTitle.value = response.data.title;
};

// Watch for locale changes
watch(() => locale.value, () => {
  fetchBlogContent();
});
</script>

Question How can I make the slug in the route update dynamically when the language changes, while keeping the page content and URL in sync without triggering a full reload? Is there a better approach to handle this in Nuxt 3?