Table of contents

Introduction

1.1.

What is Computed Property?

1.2.

What is Watcher Property?

Computed Property in Vue.js

Methods vs. Computed Caching

Computed vs. Watcher Property

What is a Computed Setter?

When to use Computed and Watcher Properties in Vue.js?

Frequently Asked Questions

Key Takeaways

Last Updated: Aug 13, 2025

Computed and Watcher Properties in Vue.js

Author Sneha Mallik

Do you think IIT Guwahati certified course can help you in your career?

Yes

Introduction

Vue.js is a free, open-source JavaScript framework for creating user interfaces and single-page apps. Vue 3 is now in beta and may change later onwards. The latest version of the Vue front-end framework is Vue 3. It builds on Vue 2's popularity and simplicity of usage.

The most intriguing aspect of Vue is how simple it is to learn. Vue.js provides us with the methods, computed, and watcher properties.

This blog post will detail the computed and watcher properties in Vue.js.

What is Computed Property?

A computed property is a method that returns a value every time. It's primarily useful when determining values from other properties. But that's not where computed properties' true power lies.

When the values used inside the computed property change, this property reacts by re-evaluating the properties; hence, we know that computed property is reactive in nature. Most notably, computed properties are also cached, allowing for improved speed when dealing with complex loops.

What is Watcher Property?

While computed properties are preferable in most circumstances, a custom watcher is occasionally required. As a result, Vue's watch option enables a more generic approach to react to data changes through the "watch" option. This is the best option when you need to do asynchronous or expensive actions to change data.

Computed Property in Vue.js

For instance, let us understand this by taking an example. In src/index.js, we can write the following code:-

new Vue({
el: "#app",
data: {
  message: "codingNinjas"
},
computed: {
  spelledMessage() {
    return this.message.split("").join("-");
  }
}
});

You can also try this code with Online Javascript Compiler

Run Code

We can then use it in our HTML template, just like any other field. As a result, we may write the following in index.html:

<!DOCTYPE html>
<html>
 <head>
  <title>Hello</title>
  <meta charset="UTF-8" />
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 </head>
 <body>
  <div id="app">
    <p>{{message}}</p>
    <p>{{spelledMessage}}</p>
  </div>
  <script src="./src/index.js"></script>
 </body>
</html>

Then we would get this as an output:

Vue.js uses the spelledMessage method, which is a getter. It takes the returned value of the message and puts it in place of {{spelledMessage}}.

As a result, the placeholder in the template must have the same name as the method that returns the value in the computed object that we require.

The value of the returned Vue instance can also be obtained as follows:

const vm = new Vue({
el: "#app",
data: {
  message: "codingNinjas"
},
computed: {
  spelledMessage() {
    return this.message.split("").join("-");
  }
}
});
console.log(vm.spelledMessage);

You can also try this code with Online Javascript Compiler

Run Code

The console.log includes the string c-o-d-i-n-g-N-i-n-j-a-s as output (same as above output). Here, the message and the spelledMessage will have the same value as the above output.

In templates, we can bind to calculated properties just like any other property. Vue understands that vm.spelledMessage depends on vm.message, so the bindings are updated when vm.message is modified.

The computed getter method has no side effects, making it easier to test and understand.

Methods vs. Computed Caching

The results of the computed properties are cached, which is an excellent feature, whereas the results returned by methods are not cached.

For scenarios where we're computing something from existing properties, we should utilize computed properties instead of methods.

Once a reactive property is modified, a computed property is re-evaluated.

For example, suppose we have:

const vm = new Vue({
el: "#app",
data: {
  message: "codingNinjas"
},
computed: {
  now() {
    return Date.now();
  }
}
});

You can also try this code with Online Javascript Compiler

Run Code

Here the computed property is not dependent on any reactive properties from the data property, so it will never update after the first computation.

Without caching, computed properties continue to be computed as reactive properties on which they rely change, causing the application to become slow as the reactive properties on which the computed property depends are changing.

Computed vs. Watcher Property

As the name implies, watch properties are great for keeping an eye on changes in a property.

We should, however, employ computed properties as much as possible due to their caching capability.

For example, let us take the following code:

// The first case
new Vue({
el: "#app",
data: {
  name: "Ninjas",
  age: 21,
  person: undefined
},
watch: {
  name: {
    immediate: true,
    handler(newVal) {
      this.person = `${newVal} - ${this.age}`;
    }
  },
  age: {
    immediate: true,
    handler(newVal) {
      this.person = `${this.name} - ${newVal}`;
    }
  }
}
});

You can also try this code with Online Javascript Compiler

Run Code

We can make the above code simpler to:

// The second case
new Vue({
el: "#app",
data: {
  name: "Ninjas",
  age: 21
},
computed: {
  person() {
    return `${this.name} - ${this.age}`;
  }
}
});

You can also try this code with Online Javascript Compiler

Run Code

The first case, as we can see, was far more complicated. To see the initial value change, we must set immediate to true in each property. The value change handler for each reactive property must then be defined.

Then we must set the person property in each handler to combine the name and the age.

With computed properties, on the other hand, we simply have one method that returns the data combined in the way we wish. It is a lot more convenient for us, and because of caching, the application we design is also faster.

What is a Computed Setter?

By default, computed properties are getter-only, but we can give one if we need a setter.

For example:

new Vue({
el: "#app",
data: {
  name: "Ninjas",
  age: 21
},
computed: {
  person: {
    get() {
      return `${this.name} - ${this.age}`;
    },
    set(newValue) {
      const [name, age] = newValue.split("-");
      this.name = name.trim();
      this.age = age.trim();
    }
  }
}
});

You can also try this code with Online Javascript Compiler

Run Code

The getter function still returns the same value as before, but we now have a setter function as well.

We split the result and set the result back to the respective reactive properties using the setter method, separating the newValue, which has the computed value from the getter function.

We can use a setter in the following way. In src/index.js, we can include the following code:

new Vue({
el: "#app",
data: {
  firstName: "Coding",
  lastName: "Ninjas"
},
computed: {
  name: {
    get() {
      return `${this.firstName} ${this.lastName}`;
    },
    set(newValue) {
      const [firstName, lastName] = newValue.split(" ");
      this.firstName = (firstName || "").trim();
      this.lastName = (lastName || "").trim();
    }
  }
}
});

You can also try this code with Online Javascript Compiler

Run Code

We add the following to index.html:

<!DOCTYPE html>
<html>
 <head>
  <title>Hello</title>
  <meta charset="UTF-8" />
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 </head>
 <body>
  <div id="app">
    <p>{{name}}</p>
    <input type="text" v-model="name" />
  </div>
  <script src="./src/index.js"></script>
 </body>
</html>

Then, when we modify the value in the input, the setter assigns the new values to the firstName and lastName fields.

When to use Computed and Watcher Properties in Vue.js?

We should use computed properties when:

We need to create new data from existing data sources.
We have a variable constructed from one or more data properties in our template.
We want to shorten a long, nested property name to something more understandable and easier to remember, but keep it updated as the original property changes.
A value from the template must be referenced. Since it is cached, creating a computed property is the best option in this scenario.
We need to pay attention to multiple or more than one data property change.

We should use watcher properties when:

A data property changes and we want to be notified and take appropriate action.
We need to pay attention to a change in the value of a prop.
We can only listen to one property at a time (we can't watch many properties simultaneously).
We want to keep an eye on a data attribute until it reaches a certain value and then takes action.

Frequently Asked Questions

1. Why is the watcher property used in Vue.js?

Ans: For complex requirements, we can use watchers, such as:

For operations that are asynchronous.
Setting the intermediate values.
Limiting the number of times an operation is called(ex: Debounce the input event)

Watchers offer a layer of control by listening for changes to a property.

Watchers allow us to keep an eye on changes in a model object, as the name suggests. While using watchers to achieve the same results as computed values is achievable, using watchers is usually more complicated and costly.

2. How are computed and watcher properties in Vue.js different?

Ans: The difference between computed and watcher properties in Vue.js:

Computed properties are more declarative than watcher properties.
Computed properties should be pure in the way that they should return a value, be synchronous, and have no side effects.
Watched props only call functions, while computed properties generate new reactive properties.
Watched properties can only watch one prop at a time, whereas computed properties can react to changes in several props.
As computed properties are cached, they only need to be recalculated when something changes. Props that have been watched are always used.
Computed properties are evaluated asynchronously, which means they are only utilized when needed. When a prop is changed, watched props are executed.

3. List the similarities between computed and watcher properties in Vue.js.

Ans: The similarities between computed and watcher properties in Vue.js:

They both react to changes in the properties.
They both can be used to generate new data.

Key Takeaways

In this blog, we have learned the concepts of computed and watcher properties in Vue.js. We learned that we could compute values from existing characteristics using computed properties. To decrease the amount of computation necessary, returned values from computed properties are cached. Setters for computed properties let us perform things with the new values returned by the computed property getter. We can use computed and watcher properties in Vue.js to keep track of reactive data changes and run code as they occur.