With Options API, we define a component’s logic using an object of options such as data, methods, and mounted. Properties defined by options are exposed on this inside functions, which points to the component instance:
<script>
export default {
// reactive state
data() {
return {
count: 0
}
},
// functions that mutate state and trigger updates
methods: {
increment() {
this.count++
}
},
// lifecycle hooks
mounted() {
console.log(`The initial count is ${this.count}.`)
}
}
</script>
<template>
<button @click=”increment”>Count is: {{ count }}</button>
</template>