Example Composition Api

compositon-api.vue

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

<script>
import { ref, computed } from "vue";

export default {
  name: "MyComponent",

  setup() {
    // Counter feature
    const counter = ref(0);
    const plusOne = () => {
      counter.value += 1;
    };

    // User feature
    const user = ref({ name: "Rudy", lastName: "G." });
    const formattedUserLabel = computed(() => `${user.value.name} - ${user.value.lastName}`);

    return { counter, plusOne, formattedUserLabel };
  }
};
</script>