Data

data gives an Ornata component a place to store persistent internal values.

These values live on the internal component instance and remain available across methods, watchers, lifecycle hooks, computed callbacks, and render callbacks.

What data is for

Use data for values that should:

• persist for the life of the component instance
• be available across multiple parts of the component
• not trigger reactive updates on their own

Common examples include:

• timer IDs
• observer instances
• third-party integration objects
• internal caches
• non-reactive bookkeeping flags

A simple example

In this example, intervalId needs to stay available for the life of the component, but it does not belong in reactive state. Storing it in data keeps it accessible across lifecycle hooks without making it part of the update flow

JavaScript

const Clock = defineComponent({
    name: 'Clock',
    data: {
        intervalId: null,
    },
    lifecycle: {
        mount() {
            this.data.intervalId = window.setInterval(() => {
                console.log('tick');
            }, 1000);
        },
        unmount() {
            if (this.data.intervalId !== null) {
                window.clearInterval(this.data.intervalId);
            }
        },
    },
});

TypeScript

interface ClockData {
    intervalId: number | null;
}

const Clock = defineComponent<{
    data: ClockData;
}>({
    name: 'Clock',
    data: {
        intervalId: null,
    },
    lifecycle: {
        mount() {
            this.data.intervalId = window.setInterval(() => {
                console.log('tick');
            }, 1000);
        },
        unmount() {
            if (this.data.intervalId !== null) {
                window.clearInterval(this.data.intervalId);
            }
        },
    },
});

A good mental model

Think of data as the component’s internal storage shelf. If a value needs to be stored and reused internally without responding to changes, it likely belongs in data.