Accessing the Vue instance

Inside the methods, we can access the Vue instance with the this keyword. For example, we could call another method:

methods: {
  saveNote (val) {
    console.log('saving note:', val)
    localStorage.setItem('content', val)
    this.reportOperation('saving')
  },
  reportOperation (opName) {
    console.log('The', opName, 'operation was completed!')
  },
},

Here, the saveNote method will be called from the contentChanged method.

We can also access the other properties and special functions of our Vue instance through this. We could remove the saveNote argument and access the content data property directly:

methods: {
  saveNote () {
    console.log('saving note:', this.content)
    localStorage.setItem('content', this.content)
  },
},

This also works in the watcher handler we created in the Watching changes section:

watch: {
  content (val, oldVal) {
    console.log('new note:', val, 'old note:', oldVal)
    console.log('saving note:', this.content)
    localStorage.setItem('content', this.content)
  },
},

Basically, you can access the Vue instance with this in any function bound to it: methods, handlers, and other hooks.