Methods versus Watchers versus Computed Props

In the Vue.js toolbox, we have access to methods, watchers, and computed properties. When should you use one or the other?

Methods are best used to react to an event occurring in the DOM, and in situations where you would need to call a function or perform a call instead of reference a value, for example, date.now().

In Vue, you would compose an action denoted by @click, and reference a method:

<template>
    <button @click="getDate">Click me</button>
</template>
<script>
export default {
    methods: {
        getDate() {
            alert(date.now())
        }
    }
}
</script>

Computed props are best used when reacting to data updates or for composing complicated expressions for us...