Vue JS Options passed to a Vue object

When initializing a Vue object, you pass in an object:

const vm = new Vue({

})

This object accepts a number of properties.

Property	Description
data	allows to pass a set of reactive data that will be used by the Vue app. All reactive properties must be added at initialization time, you can’t add new ones later.
props	it’s a set of attributes that are exposed to parent components as input data.
propsData	default data for props. Only useful during testing
methods	a set of methods that are defined on the Vue instance
computed	like methods, but cached internally
watch	allows to watch properties, and call a function when they change

Example of defining data, methods and computed properties:

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  methods: {
    reverseMessageAsMethod: function () {
      return this.message.split('').reverse().join('')
    }
  },
  computed: {
    // a computed getter
    reversedMessage: function () {
      // `this` points to the vm instance
      return this.message.split('').reverse().join('')
    }
  }
})

console.log(vm.reverseMessageAsMethod) // => 'olleH'
vm.message = 'Goodbye'
console.log(vm.reversedMessage) // => 'eybdooG'

Methods Data

vm.$watch	set up a watcher for property changes in the Vue data. It can also watch for value changes inside objects
vm.$set	set a property
vm.$delete	delete a property

Events

vm.$emit	triggers a custom event on the vm Vue instance
vm.$on	listen for a custom event on the vm Vue instance
vm.$once	like $on, but listens only once
vm.$off	removes an event listener from the Vue instance

Lifecycle Methods

vm.$mount	mount a Vue instance on a DOM element, in case it was not mounted yet
vm.$forceUpdate	force the vm Vue instance to re-render. Does not force child components to rerender.
vm.$nextTick	accepts a callback and schedules that for the next DOM update cycle
vm.$destroy	destroys the application and remove all child components, observers and listeners