methods-vue-2.js

Vue.component('methods', {
  data () {
    return {
      name: 'Israel',
      surname: 'Parra'
    }
  },
  computed: {
    fullName () {
      return `${this.name} ${this.surname}`;
    }
  },
  methods: {
    helloUser () {
      alert(this.fullName);
    }
  },
  template: `
    <div>
        <h2>Ejecutar métodos con Vue 2</h2>
        <p @click="helloUser">Pulsa aquí para ejecutar el método helloUser</p>
    </div>
  `
});

methods-vue-3.js

app.component('methods', {
    setup() {
        const name = ref("Israel");
        const surname = ref("Parra");
        const fullName = computed(() => {
            return `${name.value} ${surname.value}`;
        });
        const helloUser = () => {
            alert(`Hola ${fullName.value}`);
        }
        return { helloUser };
    },
    template: `
        <h2>Ejecutar métodos con Vue 3</h2>
        <p @click="helloUser">Pulsa aquí para ejecutar el método helloUser</p>
    `
});