computed vs watched property

by Megi93

HTML

<div id="demo">{{ fullName }}</div>

JavaScript

/*var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Fooooo',
    lastName: 'Bar',
    fullName: 'Fooo Bar'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})*/
var vm = new Vue({
    el: '#demo',
    data: {
        firstName: 'Foooo',
        lastName: 'Bar'
    },
    computed: {
        fullName: function() {
            return this.firstName + ' ' + this.lastName
        }
    }
})