Template-local reactive bindings (v-data) — declare local computed variables directly in templates

[xlsft]

What problem does this feature solve?

Currently, Vue templates cannot declare new local reactive variables (scopes).
All data accessible to the template must be declared in setup() and then returned to the render context. With a small exception of v-for that allows to declare variables within the template

This sometimes leads to repetition and less expressive templates.

For example:

<template>
  <div>
    Count: {{ count }}
    Doubled: {{ count * 2 }}
  </div>
</template>

If the same derived expression (count * 2) is used multiple times, developers must either:

• repeat the same expression everywhere, or
• move it into the script section as a computed property, even if it’s only used in a small local section of the template.

There’s currently no way to define a local, reactive variable directly within the template itself without small hacks.

For example:

<template v-for="locals in [{ doubled: count * 2 }]" :key="0">
  {{ locals.doubled }}
</template>

<!-- DataScope.vue -->
<template>
  <slot v-bind="data" />
</template>
<script setup>
  defineProps<{ data: Record<string, any> }>()
</script>

<!-- Component.vue -->
<DataScope :data="{ doubled: count * 2 }">
  <template #default="{ doubled }">
    {{ doubled }}
  </template>
</DataScope>

---

What does the proposed API look like?

<template>
  <template v-data="{ doubled: count * 2, now: new Date() }">
    Count: {{ count }}
    Doubled: {{ doubled }}
    Quadrupled but computed in template directly: {{ doubled * 2 }}
    Time: {{ now.toLocaleTimeString() }}
  </template>
</template>

Here, doubled and now are reactive variables, visible only inside this part of the template.
They automatically update if their dependencies (count, etc.) change.

---

Benefits of the proposed feature

Improved readability: Avoids repeating complex expressions in multiple template locations.
Locality: Keeps derived values close to where they’re used, instead of polluting setup().
Self-documenting templates: Clear naming for computed values improves maintainability.
Reactive by design: Automatically tracks dependencies and updates on change.
Backward compatible: Adds no breaking changes, works alongside existing template syntax.

---

Considerations / Implementation notes

The compiler/runtime would need to treat each property in the v-data object as a computed() expression.
The scope should be reactive and automatically disposed when the block is unmounted.
It must properly merge into the template’s reactive context without leaking variables outside its scope.
Ideally, it should work both on real elements and blocks.
Should be compatible with SSR, hydration, and existing optimization passes (hoisting, static trees, etc.).
Should be not readonly

---

Summary

This would enhance Vue’s declarative power and improve developer experience by allowing localized computations directly in the template without additional boilerplate or repetition.