option-api.vue

option-api.vue

<template>
  <div>{{ formattedUserLabel }}</div>
  <div>{{ counter }}</div>
</template>

<script>
export default {
  name: "MyComponent",
  data() {
    return {
      // Counter feature
      counter: 0,
      // User feature
      user: {
        name: "Rudy",
        lastName: "G."
      }
    };
  },
  methods: {
    // Counter feature
    plusOne() {
      this.counter += 1;
    }
  },
  computed: {
    // User feature
    formattedUserLabel() {
      return `${this.user.name} - ${this.user.lastName}`;
    }
  }
};
</script>