Methods allow you to implement functions associated with the component instance which can then be used as event callbacks, data manipulation, and more.

Let's define a method in the Parent component that mutates the data in the following way:

<script>
import Child from './Child.vue';
 
export default {
  name: 'Parent',
  components: {
    Child,
  },
  data: () => ({
    name: 'John Doe',
  }),
  methods: {
    changeName: function(newName) {
      this.name = newName;
    }
  },
}
</script>

In the preceding code, the changeName method is implemented as part of the component's methods. Currently, this method isn't really executed yet, but this changes next.

Like Vue template's expression context explained before, Vue takes care of setting this to the component instance; that is, the viewmodel. This means, you should have access to all relevant entries, such as data and props, in your methods; just make sure you're not using arrow functions.