Project: Mission Dashboard with Computed and Watch

Final project of the Computation Center! Build an advanced space mission dashboard that calculates flight parameters in real time, monitors critical systems, and automatically generates reports. You'll use computed properties for automatic calculations and watchers for reactive change monitoring.

Module Summary

In this module you learned:

• Computed properties - automatic calculations dependent on reactive data. Cached - they only recalculate when a dependency changes. Called without parentheses:

  {{ fuelStatus }}

  .
• Computed with getter/setter - bidirectional computed properties. Getter reads, setter parses and splits data. Useful for unit conversion and format parsing.
• watch() - manual change observation with full control. Explicit source, access to oldValue/newValue, options

  immediate

  ,

  deep

  ,

  once

  . Watch on multiple sources simultaneously.
• watchEffect() - automatic dependency tracking. No need to declare what to watch - Vue detects it automatically. Executes immediately. Cleanup via

  onCleanup

  .
• Stopping watchers - every watcher returns a stop function. Pausing/resuming in Vue 3.5+. Conditional stopping in callback.

Project Requirements

Build a Mission Control Dashboard that includes:

1. Computed properties for mission calculations

Input data: velocity (km/s), distance to target (km), fuel consumption (liters/s), tank capacity (liters). Automatically calculate: estimated arrival time, total fuel consumption, remaining fuel percentage, mission status (NOMINAL/WARNING/CRITICAL).

2. Watch on critical parameters

Monitor engine temperature (input range 0-5000K). When it exceeds 3500K, display a "WARNING". When it exceeds 4500K, display "CRITICAL" and automatically reduce velocity. Save temperature change history (last 10 values).

3. watchEffect on system status

Automatically generate a text report in a side panel that updates with every change in mission parameters. The report should include current velocity, temperature, fuel consumption, and estimated arrival time.

4. Cleanup and watcher control

Add a "Monitoring ON/OFF" button that enables/disables the temperature watcher. When monitoring is off, temperature changes don't generate alarms. Use the

stop()

Expand the starter below!