Vue Quiz

How it works

Predict this result before running the example. Which value is the source of truth? Does the total need its own setter? Would a watcher that writes total create an unnecessary synchronization path? The source below is a worked answer: a single packet count and a computed doubled value. Explain the difference between cached derivation and a side effect before adding more reactive machinery.

Run the code

Use a separate empty learning folder with Node 22.12+ in the 22 series. The reviewed Node version is 22.15.1. Save all files below with their exact relative paths; downloads may keep only the basename, so create src and any tests folders as listed. This project pins Vue 3.5.44 and Vite 7.3.1. Run npm install, then npm run dev and open the local address Vite prints.

Bhylu has no Vue playground. SFCs, npm imports and routing need this local project; do not paste them into the plain HTML or JavaScript editor. Apache, MySQL and changes to Bhylu server settings are not required. The application is a fictional seed-swap learning fixture.

• package.json
• index.html
• vite.config.mjs
• src/main.js
• src/App.vue
• src/style.css

Example

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

const packets = ref(3);
const doubled = computed(() => packets.value * 2);
</script>

<template>
  <main>
    <h1>Riverside seed swap</h1>
    <button @click="packets++">Add packet</button
    ><output data-result>{{ packets }} / {{ doubled }}</output>
  </main>
</template>

Expected result

The initial pair is 3 / 6; after one click it is 4 / 8.

packets is mutable source state and doubled is derived. No effect is needed to keep the two consistent. A watcher would be useful if a count change must start an external operation, and then that operation needs its own cancellation and error contract. This distinction is more useful than memorizing an API list.