<script setup>
import { ref, computed } from 'vue'

const firstName = ref('Ada')
const tasksLeft = ref(3)
const summary = computed(() =>
  tasksLeft.value === 0 ? 'All done!' : `${tasksLeft.value} tasks left`
)
</script>

<template>
  <h2>Hello, {{ firstName }}</h2>
  <p>{{ summary }}</p>
  <p>Shouting version: {{ firstName.toUpperCase() }}</p>
</template>