<template>
    <div class="flex items-center gap-4">
        <button @click="counter--" class="bg-black text-white rounded px-4 py-2 hover: cursor-pointer hover:bg-gray-700 transition duration-300 ">-</button>
        <div>Current Count Value: {{counter}}</div>
        <button @click="counter++" class="bg-black text-white rounded px-4 py-2 hover: cursor-pointer hover:bg-gray-700 transition duration-300 ">+</button>
    </div>
</template>
<script setup>
    import {ref} from 'vue';
    const counter = ref(0);
</script>
