// composables/useCounter.js
import { ref } from 'vue';

export function useCounter(initial = 0) {
  const count = ref(initial);

  function increment() { count.value++; }
  function decrement() { count.value--; }
  function reset() { count.value = initial; }

  return { count, increment, decrement, reset };
}


<!-- src/CounterA.vue -->
<script setup>
import { useCounter } from '../composables/useCounter';
const { count, increment, decrement, reset } = useCounter();
</script>

<template>
  <p>A: {{ count }}</p>
  <button @click="increment">+1</button>
  <button @click="decrement">-1</button>
  <button @click="reset">Reset</button>
</template>


<!-- src/CounterB.vue -->
<script setup>
import { useCounter } from '../composables/useCounter';
const { count, increment } = useCounter(100); // starts at 100
</script>

<template>
  <p>B: {{ count }}</p>
  <button @click="increment">+1</button>
</template>

<!--
  Notes:
  - useCounter returns an object, so each component destructures only
    what it needs (CounterB ignores decrement/reset).
  - Each call to useCounter() creates its OWN count ref, so CounterA
    and CounterB have completely independent counters — exactly like
    two components each calling a React custom hook.
-->