Computed values

When a value is derived from other signals, use computed(). A computed is lazy on first read (it doesn't calculate until someone reads .value) and cached — the result is stored and reused until a dependency changes.

# Why computed?

You could compute the total inline in the template:

html`<p>Total: ${() => price.value * qty.value}</p>`;

That works, but if you use the total in several places, the multiplication runs each time. A computed caches the result:

const total = computed(() => price.value * qty.value);

html`<p>Total: ${() => total.value}</p>`;
html`<p>Tax: ${() => total.value * 0.2}</p>`;

# Your task

Refactor the starter code to use a computed for the total instead of multiplying inline.