Vue.js: How to use Pinia stores in components?

1<script setup>
2import { useCounterStore } from "@/stores/counter"
3import { storeToRefs } from "pinia"
4
5const counterStore = useCounterStore()
6
7// Option 1: direct access
8console.log(counterStore.count)
9counterStore.increment()
10
11// Option 2: destructuring with storeToRefs
12const { count, doubleCount } = storeToRefs(counterStore)
13const { increment } = counterStore
14</script>
15
16<template>
17    <div>
18        <p>Count: {{ count }}</p>
19        <p>Double: {{ doubleCount }}</p>
20        <button @click="increment">Increment</button>
21    </div>
22</template>