diff --git a/.changeset/jolly-loops-shave.md b/.changeset/jolly-loops-shave.md
new file mode 100644
index 000000000000..580817eea3e7
--- /dev/null
+++ b/.changeset/jolly-loops-shave.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fixes an issue with the client router where Vue's `:deep()` notation was ignored in dev mode.
diff --git a/packages/astro/e2e/view-transitions.test.js b/packages/astro/e2e/view-transitions.test.js
index 089a90d3e6b3..d86148045619 100644
--- a/packages/astro/e2e/view-transitions.test.js
+++ b/packages/astro/e2e/view-transitions.test.js
@@ -1821,4 +1821,17 @@ test.describe('View Transitions', () => {
 		await expect(page.locator('#style')).toHaveCount(1);
 		await expect(page.locator('#preload')).toHaveCount(1);
 	});
+
+	test('Styles with data-vite-dev-id persist through head swap', async ({ page, astro }) => {
+		await page.goto(astro.resolveUrl('/island-vue-one'));
+		let cnt = page.locator('.counter pre');
+		await expect(cnt).toHaveText('AA0');
+		await page.locator('[data-vite-dev-id*="VueCounter.vue?vue&type=style"]').evaluate((el) => (el.dataset.marker='this'), undefined);
+		await page.click('#click-two');
+		const p = page.locator('#island-two');
+		await expect(p).toBeVisible();
+		cnt = page.locator('.counter pre');
+		await expect(cnt).toHaveText('BB0');
+		await expect(page.locator('[data-vite-dev-id*="VueCounter.vue?vue&type=style"][data-marker="this"]')).toHaveCount(1);
+	});
 });
diff --git a/packages/astro/src/transitions/swap-functions.ts b/packages/astro/src/transitions/swap-functions.ts
index 61901649ecf4..2f7e52bfcfc9 100644
--- a/packages/astro/src/transitions/swap-functions.ts
+++ b/packages/astro/src/transitions/swap-functions.ts
@@ -186,6 +186,16 @@ const persistedHeadElement = (el: HTMLElement, newDoc: Document): Element | null
 		const href = el.getAttribute('href');
 		return newDoc.head.querySelector(`link[rel=stylesheet][href="${href}"]`);
 	}
+	// In dev mode, Vite injects <style data-vite-dev-id="..."> elements whose
+	// textContent is later transformed by HMR (e.g. Vue's `:deep()` → `[data-v-xxx]`).
+	// Match these by their stable dev ID so the already-transformed style is preserved
+	// across ClientRouter soft navigations instead of being replaced by the raw version.
+	if (import.meta.env.DEV && el.tagName === 'STYLE') {
+		const viteDevId = el.getAttribute('data-vite-dev-id');
+		if (viteDevId) {
+			return newDoc.head.querySelector(`style[data-vite-dev-id="${viteDevId}"]`);
+		}
+	}
 	// Preserve inline <style> elements with identical content across navigations.
 	// This prevents unnecessary removal and re-insertion of styles (e.g. @font-face
 	// declarations from <Font>), which would cause the browser to re-evaluate them