I'm following Vue's getting started and I'm getting confused, tried CSS Tricks and Stack Overflow and still not understanding it in practice. Someone needs to explain me like i'm five.

What I got so far:

Computed - They are cached based on dependency and only re-evaluate on dependency change.

Methods -

A method invocation will always run the function whenever a re-render happens.

What exactly defines a render or re-render? Every data:value change?

Computed and methods has the same structure, but their location on code are different... 🤔🤔🤔

//vm instance
computed: {
    // a computed getter
    reversedMessage: function () {
      // `this` points to the vm instance
      return this.message.split('').reverse().join('')
    }
  }
//...

// in component
methods: {
  reverseMessage: function () {
    return this.message.split('').reverse().join('')
  }
}
//...

Watch - I got confused about this one, Vue's getting started says it is a callback, alerts that is better to use computed, but don't explain for what it is used for...

I will appreciate any clarification on this topic 👍