var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo 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: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

computed: {
   val () {
     return this.someDataProperty * someOtherVariable
   }
}

computed: {
  val (flag) {
    return (flag === 1)
      ? this.someDataProperty * someOtherVariable
      : this.someDataProperty * 5
    }
}

watch: {
   val (n, o) {
     console.log(n, o)
   }
}

this.$store.state.someProperty.someNestedProperty.someDeeplyNestedProperty

computed: {
  someDeeplyNestedProperty () {
     return this.$store.state.someProperty.someNestedProperty.someDeeplyNestedProperty
  }
}

watch: {
  somethingSelected() {
    this.router.push('someOtherRoute')
  }
}

let app = new Vue({
    el: '#app',
    data: {
        name: ""
    }
});

watchers: {
    "name": function(newValue, oldValue){
         if(newValue != oldValue)} {
            fetch(url, {method: 'post', body: JSON.stringify({name: this.name})}).then(...);
        }
    }
}

Vue.component('my-comp',{
  template: '#my-comp',
  props: ['username'],
  created() {
    this.user = this.username;
  },
  watch:{
    username(val){
      this.user = val;
    }
  },
  data(){
    return{
      user: ''
    }
  }
});