Interactive sandbox
Make a change.
Trace the ripple.
Write a tiny piece of Vue-like logic, then watch the simulation explain what the browser sees.
Counter.vueVUE
01
<script setup>02
const count = ref(0)03
const doubled = computed(() => count * 2)04
05
</script>06
07
<template>08
<button @click="count++">09
{{ count }} × 2 = {{ doubled }}10
</button>11
</template> syntax looks goodLn 02, Col 23
Dependency graph LIVE
ref( )count0
computed( )doubled0
effectrenderDOM
dependency triggered
09:41:00state mutationcount changed to 0
09:41:00scheduler queued1 effect waiting
Previewlocalhost:5173
reactive counter
0× 20
Click the state. The graph wakes up.
Nothing runs on a server. This is a safe, frontend-only simulation of Vue’s mental model.