computed-properties-vue-2.js

Vue.component('computed-properties', {
    data () {
      return {
        name: 'Israel',
        surname: 'Parra'
      }
    },
    computed: {
      fullName () {
        return `${this.name} ${this.surname}`;
      }
    },
    template: `
      <div>
        <h2>Computed properties</h2>
        <p>{{ fullName }}</p>
      </div>
    `
});

computed-properties-vue-3.js

app.component('computed-properties', {
    setup() {
        const name = ref("Israel");
        const surname = ref("Parra");
        const fullName = computed(() => {
            return `${name.value} ${surname.value}`;
        });
        return { name, surname, fullName };
    },
    template: `
        <h2>Computed properties en Vue 3</h2>
        <p>Nombre: {{ name }} | Apellido: {{ surname }}</p>
        <p>Nombre completo: {{ fullName }}</p>
    `
});