Vue Ref

How it works

A ref is a reactive container with a value property in JavaScript. It can hold a primitive or an object. Using one for a selected packet count makes the intended changing value easy to find. The template tracks the ref during rendering. Updating value schedules a DOM update; it does not immediately rebuild the whole document or write anything to persistent storage.

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 } from "vue";

const packets = ref(4);
function remove() {
  if (packets.value > 0) packets.value -= 1;
}
</script>

<template>
  <main>
    <h1>Riverside seed swap</h1>
    <button @click="remove">Take one</button
    ><output data-result>{{ packets }}</output>
  </main>
</template>

Expected result

Take one changes the count from 4 to 3.

The small guard prevents a negative count in this local example. It is part of the action rather than only disabling a button. A production stock operation would need an authoritative server check because another browser can have a different view of availability.