[Vapor] Does external DOM mutation silently break reactivity?

[HaceraI]

I was playing around with a Vapor component and noticed something weird — after I triggered Chrome's built-in page translation, some bindings just stopped updating. No errors, no warnings, nothing. The counter froze, button text froze, but v-if show/hide kept working fine.

Minimal repro:

<script setup vapor>
import { ref } from 'vue'

const counter = ref(0)
const visible = ref(false)
const color = ref()

setInterval(() => counter.value += 1, 1000)

function onClick() {
  visible.value = !visible.value
}

function onChangeColor() {
  color.value = 'red'
}
</script>

<template>
  <!-- 🔴 freezes after translation -->
  <span>Counter value is: {{ counter }}</span>
  <hr />

  <!-- 🔴 label freezes after translation -->
  <button @click="onClick">{{ visible ? 'Hide' : 'Show' }}</button>
  <!-- ✅ this still works -->
  <span v-if="visible">Hello Vapor!</span>
  <hr />

  <!-- ✅ color still works after translation -->
  <button @click="onChangeColor" :style="{ color }">Change Color</button>
</template>

Steps:

1. Open playground link
2. Watch the counter increment and the button label update normally
3. Enable browser translation (Chrome: right-click → Translate to [language])
4. The counter freezes, button label freezes — but show/hide still works

I don't think this is specific to browser translation. Translation just happens to be the easiest way to trigger it. My guess is that anything that touches the DOM from outside Vue could cause the same thing — accessibility extensions, password managers, whatever. Browser translation is just the most common one users will actually hit without realizing it.

The same issue was reported in SolidJS back in 2022 (solidjs/solid#1451), which was closed without a resolution. Thought it was worth flagging for Vapor before it ships more widely, especially since vdom mode doesn't seem to have this problem.

Not sure what the right fix looks like — just wanted to make sure it's on the radar.

[natsuki-engr]

Svelte doesn't have any solution either.

• Google translation issue sveltejs/svelte#15090
• Rendering Issue when using Google Chrome Translate sveltejs/svelte#9031

This behavior depends on how the framework manages and modifies the DOM, regardless of whether it's based on a VDOM or not, and the reactivity in VDOM mode is similarly broken like this.
I think it's as difficult for a framework as considering using Vue and jQuery together.

[edison1105]

Like solid, vapor relies on a stable DOM structure at runtime. If the DOM structure changes, it will cause bugs.