How Vue tracks dependencies automatically - Try It Yourself

How Vue tracks dependencies automatically

📖 Scenario: You are building a simple Vue 3 app that shows a counter and a message that updates automatically when the counter changes.

🎯 Goal: Create a Vue 3 component using the Composition API that demonstrates how Vue tracks dependencies automatically with ref and computed.

📋 What You'll Learn

Create a reactive counter variable using ref

Create a computed property that depends on the counter

Display the counter and computed message in the template

Add a button to increase the counter

💡 Why This Matters

🌍 Real World

Reactive state and computed properties are the core of building interactive user interfaces in Vue. This project shows how Vue tracks dependencies automatically to update the UI efficiently.

💼 Career

Understanding Vue's reactivity system is essential for frontend developers working with Vue.js to build modern web apps that respond instantly to user actions.

1

Setup reactive counter variable

Create a Vue 3 component with <script setup> and import ref from 'vue'. Then create a reactive variable called counter initialized to 0.

Vue

// Your code here

Need a hint?

Use import { ref } from 'vue' and then const counter = ref(0) to create a reactive variable.

2

Add computed message depending on counter

Import computed from 'vue' and create a computed property called message that returns the string `Counter is ${counter.value}`.

Vue

import { ref, computed } from 'vue'
const counter = ref(0)
// Your code here

Need a hint?

Use computed(() => `Counter is ${counter.value}`) to create a reactive message that updates when counter changes.

3

Add template to display counter and message

Add a <template> section that shows the counter value and the message computed property inside <p> tags.

Vue

import { ref, computed } from 'vue'
const counter = ref(0)
const message = computed(() => `Counter is ${counter.value}`)



  

Need a hint?

Use {{ counter }} and {{ message }} inside <p> tags to show their values.

4

Add button to increase counter

Add a button inside the <template> that increases counter.value by 1 when clicked using @click event.

Vue

import { ref, computed } from 'vue'
const counter = ref(0)
const message = computed(() => `Counter is ${counter.value}`)



  Counter: {{ counter }}
  {{ message }}
  

Need a hint?

Add a button with @click="counter.value++" to increase the counter when clicked.