Data on the page

Make a Vue app, keep data in refs, show it on the page with {{ }}, and see the page change by itself when the data changes.

Apps like a basket, a chat or a scoreboard show data that keeps changing. Vue keeps the page in step with it for you.

In the DOM course, changing the page took two jobs: change the variable, then put it on the page with textContent. Vue does the second job for you:

<p>Score: {{ score }}</p>

{{ score }} shows the data and keeps it up to date. The data lives in the app's setup, made with ref so that Vue watches it:

const score = ref(0);
return { score };        // the names the page can use

@click="score++" on the button changes the score when it is clicked. Copy it for now; lesson 3 is all about events.

The console says you are running a development build of Vue: the version with extra warnings to help you. You can ignore that line.

Predict: Read the code and say what it will do before you run anything. A wrong guess is fine: it shows you what to look for.
Run: Run it and compare the result with your prediction.
Investigate: Trace how each line of code connects to what you see.
Modify: Change the code on purpose and check the result.
Make: Build something new using what you have learned. Expect a few tries; that is normal.

PredictRead the code and say what it will do before you run anything. A wrong guess is fine: it shows you what to look for.

Predict

page.html

<div id="app">
  <p>Score: {{ score }}</p>
  <button @click="score++">Add a point</button>
</div>

<script src="vue.js"></script>
<script>
  const { createApp, ref } = Vue;
  createApp({
    setup() {
      const score = ref(0);
      return { score };
    }
  }).mount("#app");
</script>

There is no textContent anywhere in this code.

You click Add a point three times. What does the page show?Score: {{ score }}Score: 111Score: 0, because no line sets the textScore: 3

RunRun it and compare the result with your prediction.

Run

Press Run and click the button. Then change "Quiz night" to another title and run again.

page.html

<div id="app">
  <h1>{{ title }}</h1>
  <p>Score: {{ score }}</p>
  <button @click="score++">Add a point</button>
</div>

<script src="vue.js"></script>
<script>
  const { createApp, ref } = Vue;
  createApp({
    setup() {
      const title = ref("Quiz night");
      const score = ref(0);
      return { title, score };
    }
  }).mount("#app");
</script>

Try it yourselfYour edits are saved in this browser.

I clicked the button and saw the page follow the score.

InvestigateTrace how each line of code connects to what you see.

Investigate

page.html

<div id="app">
  <h1>{{ title }}</h1>
  <p>Score: {{ score }}</p>
  <button @click="score++">Add a point</button>
</div>

<script src="vue.js"></script>
<script>
  const { createApp, ref } = Vue;
  createApp({
    setup() {
      const title = ref("Quiz night");
      const score = ref(0);
      return { title, score };
    }
  }).mount("#app");
</script>

Data, names and the page.

What would you have to write?

The score never moves.

Match each part with what it does.

createApp({ … }).mount("#app")

const score = ref(0);

return { title, score };

@click="score++"

In the DOM course, which line would this page also need?None: it would need fewer linescreateApp(…)const score = ref(0);scoreEl.textContent = score;

The page shows Score: 0, and clicking does nothing. There is no red error. Click the line that is wrong.

ModifyChange the code on purpose and check the result.

Modify

The other direction.

Need a hint?

A second button can change the same data the other way.

Another hint

Copy the button and change score++ to score--.

Show the expected result

What the finished page looks like — What it should look like. Your words can be different.

New data, start to finish.

Need a hint?

New data needs three things: a ref in setup, its name in the return, and {{ }} on the page.

Another hint

const team = ref("Owls"); then return { title, team, score }; then <p>Team: {{ team }}</p>

Show the expected result

Try it yourselfYour edits are saved in this browser.

Add a Take a point button.

This ticks when your page has all of the above.

Show a team name, kept in a ref called team.

This ticks when your page has all of the above.

MakeBuild something new using what you have learned. Expect a few tries; that is normal.

A counter of your own

Lives and level, likes and dislikes, goals for two teams: make two refs, return them, show them with {{ }}, and give each a button.

Try it yourselfYour edits are saved in this browser.

Show two pieces of data with {{ }}, each with a button that changes it.

This ticks when your page has all of the above.

Info

Where this leads

Next: lists and choices, with v-for and v-if.

Your page needs to show a list of players, one line each. What would you rather write?A bigger {{ }}One <li> for each player by handcreateElement in a loop, as in the DOM courseOne line that says: one <li> for each player

For teachers

Students make a Vue app, predict that the page follows the data with no textContent, match the parts of the app, find a plain variable Vue does not watch, add a button and new data, and make a two-value counter. About 50 minutes.

Open the teacher guide: answers, solutions, slides and a worksheet.

Students will be able to

I can make a Vue app and keep its data in refs.
I can show data on the page with {{ }}.
I can explain why the page changes by itself when the data changes.

Before class

Read the unit primer first. A Vue app has two halves. The page is ordinary HTML inside <div id="app">, with {{ name }} wherever a value should appear. The setup function makes the data with ref(...) and returns the names the page may use. createApp({ setup() { … } }).mount("#app") joins them. When a ref changes, Vue redraws the parts of the page that show it: students never write textContent.

vue.js sits beside the page in the playground (it is served from this site). On a real site you would use Vue's file from vuejs.org or a build tool; teacher notes later in the course say more. The console shows one line about a development build: that is the version with friendlier warnings, chosen on purpose.

@click="score++" is a recipe in this lesson (events are lesson 3). The planted bug is a plain let variable: the click changes it but Vue is not watching, so the page never updates and there is no error. That is the most important idea in the course: Vue only keeps up with data it watches.

Running the lesson

Predict: ask students who did the DOM course which line they expect to need.
Run: change the title in setup and run again; nothing else on the page needs to change.
Investigate: for the bug, ask "how does Vue know the score changed?"
Modify: new data is three edits: the ref, the return, the {{ }}. Write them as a checklist on the board.
Make: ask each student which button changes which ref.

The hard part (on purpose)

Students forget one of the three edits (ref, return, {{ }}) and the value does not show. Ask them to point to all three for each piece of data before you look at the code.

When students get stuck

The page shows {{ score }} as text. Ask: Is the vue.js line there, and does the app mount on #app? Fix: Load vue.js before the script, and keep the {{ }} inside the div with id app.
A value is blank and the console warns it was accessed but is not defined. Ask: Is its name in the return? Fix: Add it: return { title, score, team };
Clicks do nothing and there is no error. Ask: Was the data made with ref? Fix: const score = ref(0); a plain let is not watched.

Stretch and support

Stretch: Show the score twice on the page (in the title and a paragraph) and watch both follow. Add a button that doubles the score.

Support: Give the finished run page and ask students only to add the Take a point button.

Where it leads

Next lesson: lists with v-for and choices with v-if. Class idea: list three apps and name the data each one keeps.

Sources

Vue.js: Quick Start (using Vue from a script tag) (checked 12 October 2026)
Vue.js: Reactivity fundamentals (ref) (checked 12 October 2026)

What each step is for

Predict: Students who learned textContent expect the page to stay at 0; seeing it follow the data is the whole idea of Vue.
Investigate: createApp looks after everything inside #app; ref makes data Vue watches; setup returns the names the page can use; {{ }} shows them and keeps them up to date.
Modify: New data is a ref returned from setup; the page can show it anywhere with {{ }}.
a counter of your own: Goals only: two refs, shown with {{ }}, each changed by a button.

Now you can

Make a Vue app and keep its data in refs.
Show data on the page with {{ }}.
Explain why the page changes by itself when the data changes.

Next lesson2. Lists and choices: v-for and v-ifMake one tag for each item in a list with v-for, show a tag only when it is needed with v-if, and watch both keep up as the list changes.

Source: content/code/vue/vue-data/lesson.md