SimpleCounterVue3.vue

<template>
    <div>
        <h2>Simple Counter</h2>
        <p>{{ counter }}</p>
        <p>{{ counterComputed }}</p>
        <button @click="increment()">Incrementar</button>
        <button @click="decrement()">Decrementar</button>
    </div>
</template>

<script>
    import { ref, computed } from '@vue/composition-api';
    export default {
        name: "SimpleCounter",
        setup () {
            const counter = ref(0);
            const increment = () => {
                counter.value++;
            };
            const decrement = () => {
                counter.value--;
            };
            const counterComputed = computed(() => {
                if (counter.value === 0) return counter.value;
                return counter.value > 0 ? `+${counter.value}` : `${counter.value}`;
            });
            return { counter, counterComputed, increment, decrement };
        }
    }
</script>