// stores/counter.js
import { defineStore } from 'pinia';
import { ref, computed } from 'vue';

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0);
  const double = computed(() => count.value * 2);

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

  return { count, double, increment, reset };
});


// main.js
import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue';

createApp(App).use(createPinia()).mount('#app');


<!-- src/Controls.vue -->
<script setup>
import { useCounterStore } from './stores/counter';
const store = useCounterStore();
</script>

<template>
  <button @click="store.increment">+1</button>
  <button @click="store.reset">Reset</button>
</template>


<!-- src/Display.vue -->
<script setup>
import { useCounterStore } from './stores/counter';
const store = useCounterStore();
</script>

<template>
  <p>Count: {{ store.count }} (double: {{ store.double }})</p>
</template>

<!--
  Notes:
  - Controls and Display are unrelated siblings — both call
    useCounterStore() and get the SAME shared instance, so incrementing
    in Controls updates Display immediately.
  - Accessing store.count / store.double directly in the template keeps
    reactivity; destructuring would need storeToRefs (see Challenge 2).
-->