rework store usage

src/confirm/ConfirmModal.vue

@@ -1,18 +1,15 @@
 <script setup lang="ts">
 import {computed} from "vue";
-import {storeToRefs} from "pinia";
 import {Modal} from "@/components";
 import {useConfirmStore} from "./useConfirm";
 
 const confirmStore = useConfirmStore();
-const {open, options} = storeToRefs(confirmStore);
-const {accept, cancel} = confirmStore;
 
 const modalOpen = computed({
-  get: () => open.value,
+  get: () => confirmStore.open,
   set: value => {
     if (!value) {
-      cancel();
+      confirmStore.cancel();
     }
   },
 });
@@ -21,12 +18,12 @@ const modalOpen = computed({
 <template>
   <Modal v-model:open="modalOpen">
     <div class="bg-slate-800 rounded pb-4 w-96">
-      <span class="m-2">{{ options.title ?? "Confirm" }}</span>
+      <span class="m-2">{{ confirmStore.options.title ?? "Confirm" }}</span>
       <hr />
-      <div class="m-4">{{ options.message }}</div>
+      <div class="m-4">{{ confirmStore.options.message }}</div>
       <div class="flex justify-end">
-        <button class="me-2" @click="cancel">{{ options.cancelLabel ?? "Cancel" }}</button>
-        <button class="confirm me-4" :class="options.danger ? 'danger' : ''" @click="accept">{{ options.confirmLabel ?? "Confirm" }}</button>
+        <button class="me-2" @click="confirmStore.cancel">{{ confirmStore.options.cancelLabel ?? "Cancel" }}</button>
+        <button class="confirm me-4" :class="confirmStore.options.danger ? 'danger' : ''" @click="confirmStore.accept">{{ confirmStore.options.confirmLabel ?? "Confirm" }}</button>
       </div>
     </div>
   </Modal>