rework store usage

src/pages/rules/ListRuleBooks.vue

@@ -1,12 +1,10 @@
 <script setup lang="ts">
-import {storeToRefs} from "pinia";
 import {DocumentDuplicateIcon, PencilSquareIcon, TrashIcon} from "@heroicons/vue/24/outline";
 import {confirm} from "@/confirm";
 import {RuleBook, useRuleBooksStore} from "@/rules";
 import {routeNames} from "@/routes";
 
 const ruleBooksStore = useRuleBooksStore();
-const {ruleBooks} = storeToRefs(ruleBooksStore);
 
 const duplicate = async (ruleBook: RuleBook) => {
   if (await confirm({title: "Duplicate Rule Book", message: `Duplicate ${ruleBook.name}?`, confirmLabel: "Duplicate"})) {
@@ -27,7 +25,7 @@ const remove = async (ruleBook: RuleBook) => {
     <div class="flex justify-end border-b-1">
       <RouterLink class="button mb-2 ms-2" :to="{ name: routeNames.newRuleBook}">New Rule Book</RouterLink>
     </div>
-    <div v-for="ruleBook in ruleBooks" :key="ruleBook.ruleBookId" class="flex items-center mt-2">
+    <div v-for="ruleBook in ruleBooksStore.ruleBooks" :key="ruleBook.ruleBookId" class="flex items-center mt-2">
       <span class="flex grow me-2">{{ruleBook.name}}</span>
       <RouterLink class="btn-icon me-1" :to="{ name: routeNames.editRuleBook, params: { ruleBookId: ruleBook.ruleBookId } }"><PencilSquareIcon /></RouterLink>
       <button class="btn-icon me-1" @click="duplicate(ruleBook)"><DocumentDuplicateIcon /></button>