Reactivity

Studio writes this format for you. The State, Data, and Events panels ( Script & logic ) generate everything below — this page documents the model if you want to hand-edit or understand it.

Template literal syntax is valid anywhere a string value appears in the document tree. All reactivity is powered by @vue/reactivity .

Reactive Element Properties

{
  "tagName": "div",
  "textContent": "undefined items remaining",
  "className": "card",
  "hidden": 
}

Reactive Style Properties

{
  "tagName": "div",
  "style": {
    "color": "inherit",
    "opacity": "1"
  }
}

Reactive Attributes

{
  "tagName": "button",
  "attributes": {
    "aria-label": "undefined unread messages",
    "data-state": "undefined"
  }
}

How It Works

When the compiler encounters in any string-valued property, it wraps the binding in a reactive effect:

watchEffect(() => {
  el.textContent = state.count} items remaining`;
});

Dependencies are tracked automatically by Vue when state.* properties are read.

$ref vs Template Strings

Computed State

Template strings in state become computed() values:

{
  "state": {
    "firstName": "Jane",
    "lastName": "Doe",
    "fullName": "undefined undefined"
  }
}

Signal Access in JavaScript

Within body strings and external .js files, read and write state directly:

// Read
const current = state.count;

// Write
state.count = current + 1;

// Mutate array (Vue tracks mutations)
state.items.push(newItem);

// Mutate nested object
state.user.name = "Alice";

No .get() or .set() calls. No this . All component state is accessed via state .

Web API Prototypes

Built-in prototypes for common web APIs:

Timing