Vue 3 Composition API destructuring

gistfile1.txt

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

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

  function increment() {
    count.value++;
  }

  function decrement() {
    count.value--;
  }

  function reset() {
    count.value = 0;
  }

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

Usage:

```html
<!-- src/App.vue -->
<template>
  <div id="app">
    <h1>Counter App</h1>
    <p>Current count: {{ count }}</p>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
    <button @click="reset">Reset</button>
  </div>
</template>

<script>
import useCounter from './composables/useCounter';

export default {
  setup() {
    const { count, increment, decrement, reset } = useCounter();
    return { count, increment, decrement, reset };
  },
};
</script>

<style>
/* Add your styles here */
</style>
```