@cavulsqa/reactive-vue 0.2.0 → 1.0.0

package/README.md

@@ -7,8 +7,6 @@ copy between apps.
   `useStaticQuery`, bound to Vue's lifecycle: fetch on mount, refetch on table change (debounced),
   in-flight deduplication by query key, retry with backoff, stale-while-revalidate, a per-instance
   cache window, cancel on unmount, and a deferred first read via a reactive `enabled`.
-- `uniqueQueryKey(prefix)` — a key that is never shared, so a query is never deduplicated against
-  another.
 - An injectable `logger`, so failures reach your error service rather than only the console.
 - `createVueQueryMetrics()` — the recorder with its state in `reactive()`, plus a `useQueryMetrics`
   composable of derived counters for a dev-tools panel.
@@ -51,7 +49,7 @@ Then, at a call site:
 ```ts
 const { data, loading, error, refetch } = useReactiveQuery(
   () => rdb.selectFrom("sale_order").selectAll().execute(),
-  { tables: ["sale_order"], queryKey: uniqueQueryKey("sale_order:list") },
+  { tables: ["sale_order"], queryKey: ["sale_order:list"] },
 );
 ```
 
@@ -66,15 +64,33 @@ createReactiveQuery({
 });
 ```
 
-## queryKey is an identity, not a label
+## queryKey is an identity, built from arguments
 
-Two mounted queries sharing a `queryKey` await a single request and share its result. That is
-correct for the same list rendered twice, and wrong for two different queries that happen to be
-named alike — the second is handed the first's rows.
+A key is an array, and two mounted queries whose keys hash alike await one request and share its
+result. That is what you want — the same list rendered twice costs one query — and it is only safe
+because the key carries the arguments:
 
-So: `uniqueQueryKey("sale_order:list")` unless sharing is the point, in which case use a stable
-literal. As a backstop, mounting the same key against different `tables` logs a warning; pass
-`warnOnKeyConflict: false` to silence it.
+```ts
+queryKey: ["sale_order", id]; // two detail pages, two identities
+queryKey: ["sale_order:list"]; // one list, shared wherever it appears
+```
+
+Refs inside a key are unwrapped and tracked, so the key can follow a filter. When it moves, the
+query re-runs through the same debounce a table change uses — no `refetch()` on every keystroke:
+
+```ts
+const term = ref("");
+useReactiveQuery(() => search(term.value), {
+  tables: ["sale_order"],
+  queryKey: ["sale_order:search", term],
+  debounce: 200,
+});
+```
+
+A key may hold anything JSON can represent; object field order does not matter. A function or a
+symbol throws rather than hashing to the same string as every other one. As a backstop, mounting
+the same key against different `tables` logs a warning; pass `warnOnKeyConflict: false` to silence
+it.
 
 ## What this does not do
 
@@ -96,7 +112,7 @@ competes for the one native database thread while the first screen loads:
 ```ts
 useReactiveQuery(load, {
   tables: ["partner"],
-  queryKey: uniqueQueryKey("partner:list"),
+  queryKey: ["partner:list"],
   enabled: isTabActive, // a ref - activation starts the read and the subscription together
 });
 ```

package/dist/framework7.d.mts

@@ -1,4 +1,4 @@
-import { Ref } from "vue";
+import { ComputedRef, Ref } from "vue";
 //#region src/framework7.d.ts
 /**
  * Framework7 emits these on the `.page` element. An app on another router passes its own.
@@ -17,8 +17,6 @@ declare function providePageVisibility(options?: ProvidePageVisibilityOptions):
  * The provider's own component reads its ref directly: `provide` is not visible to the component
  * that called it.
  */
-declare function usePageVisibility(): {
-  value: boolean;
-};
+declare function usePageVisibility(): Ref<boolean> | ComputedRef<boolean>;
 //#endregion
 export { FRAMEWORK7_PAGE_EVENTS, PageVisibilityEvents, ProvidePageVisibilityOptions, providePageVisibility, usePageVisibility };

package/dist/framework7.mjs

@@ -1,11 +1,11 @@
-import { getCurrentInstance, inject, onBeforeUnmount, onMounted, provide, ref } from "vue";
+import { computed, getCurrentInstance, inject, onBeforeUnmount, onMounted, provide, ref } from "vue";
 //#region src/framework7.ts
 const FRAMEWORK7_PAGE_EVENTS = {
 	show: ["page:beforein", "page:tabshow"],
 	hide: ["page:beforeout", "page:tabhide"]
 };
 const PAGE_VISIBILITY_KEY = Symbol("pageVisibility");
-const ALWAYS_VISIBLE = { value: true };
+const ALWAYS_VISIBLE = computed(() => true);
 const ownVisibility = /* @__PURE__ */ new WeakMap();
 function resolvePageEl(node, pageSelector) {
 	let current = node;

package/dist/index.d.mts

@@ -1,18 +1,28 @@
-import { ComputedRef, Ref } from "vue";
-import { OnTableChangeFn, QueryMetric, QueryMetrics, QueryMetricsRecorder, ReactiveQueryOptions } from "@cavulsqa/reactive-db";
+import { ComputedRef, MaybeRefOrGetter, Ref } from "vue";
+import { OnTableChangeFn, QueryKey, QueryMetric, QueryMetrics, QueryMetricsRecorder, ReactiveQueryOptions, TableName } from "@cavulsqa/reactive-db";
 //#region src/reactiveQuery.d.ts
 interface ReactiveQueryLogger {
   debug: (message: string, ...details: unknown[]) => void;
   warn: (message: string, ...details: unknown[]) => void;
   error: (message: string, ...details: unknown[]) => void;
 }
-/**
- * `enabled` may be a ref, so a screen can defer its first read until it is actually shown.
- * Framework7 mounts every tab at startup; without this, a tab the user has not opened still
- * competes for the one native database thread while the first screen is loading.
- */
-type VueReactiveQueryOptions<T> = Omit<ReactiveQueryOptions<T>, "enabled"> & {
+type VueReactiveQueryOptions<T, DB = Record<string, unknown>> = Omit<ReactiveQueryOptions<T, DB>, "enabled" | "queryKey" | "isVisible"> & {
+  /**
+   * `enabled` may be a ref, so a screen can defer its first read until it is actually shown.
+   * Framework7 mounts every tab at startup; without this, a tab the user has not opened still
+   * competes for the one database thread while the first screen is loading.
+   */
   enabled?: boolean | Ref<boolean> | ComputedRef<boolean>;
+  /**
+   * Identity, from the values the query reads: `["order", id]`, not `"order"`.
+   *
+   * Refs inside the key are unwrapped and tracked, so `["search", term]` re-keys the query as the
+   * term moves: the key follows the filter and brings the debounced refetch with it, instead of a
+   * manual `refetch()` on every keystroke.
+   */
+  queryKey: MaybeRefOrGetter<QueryKey>;
+  /** A real ref, because a plain object cannot be watched and a deferred refetch would never run. */
+  isVisible?: Ref<boolean> | ComputedRef<boolean>;
 };
 interface ReactiveQuery<T> {
   data: Ref<T | null>;
@@ -28,9 +38,9 @@ interface ReactiveQuery<T> {
   invalidate: () => Promise<void>;
   cancel: () => void;
 }
-interface CreateReactiveQueryDeps {
+interface CreateReactiveQueryDeps<DB = Record<string, unknown>> {
   /** Subscribe to table changes. Wire this to the same change bus the writes emit on. */
-  onTableChange: OnTableChangeFn;
+  onTableChange: OnTableChangeFn<DB>;
   /** Defaults to a no-op recorder. Pass `createVueQueryMetrics().recorder` to collect timings. */
   metrics?: QueryMetrics;
   /**
@@ -39,13 +49,10 @@ interface CreateReactiveQueryDeps {
    * router that mounts every tab up front, pass an adapter - `usePageVisibility` from
    * `@cavulsqa/reactive-vue/framework7` is one.
    */
-  useVisibility?: () => {
-    value: boolean;
-  };
+  useVisibility?: () => Ref<boolean> | ComputedRef<boolean>;
   /**
-   * Warn when two mounted queries share a `queryKey` but watch different tables - they are
-   * different queries, so the second is handed the first's rows. Defaults to on outside
-   * production.
+   * Warn when two mounted queries share a key but watch different tables - they are different
+   * queries, so the second is handed the first's rows. On unless turned off.
    */
   warnOnKeyConflict?: boolean;
   /**
@@ -54,29 +61,26 @@ interface CreateReactiveQueryDeps {
    */
   logger?: ReactiveQueryLogger;
 }
-interface ReactiveQueryComposables {
-  useReactiveQuery: <T>(queryFn: () => Promise<T>, options: VueReactiveQueryOptions<T>) => ReactiveQuery<T>;
-  useStructuralQuery: <T>(queryFn: () => Promise<T>, tables: string[], options: Omit<VueReactiveQueryOptions<T>, "tables" | "refetchOn">) => ReactiveQuery<T>;
-  useStaticQuery: <T>(queryFn: () => Promise<T>, tables: string[], options: Omit<VueReactiveQueryOptions<T>, "tables" | "enabled">) => ReactiveQuery<T>;
+interface ReactiveQueryComposables<DB = Record<string, unknown>> {
+  useReactiveQuery: <T>(queryFn: () => Promise<T>, options: VueReactiveQueryOptions<T, DB>) => ReactiveQuery<T>;
+  useStructuralQuery: <T>(queryFn: () => Promise<T>, tables: TableName<DB>[], options: Omit<VueReactiveQueryOptions<T, DB>, "tables" | "refetchOn">) => ReactiveQuery<T>;
+  useStaticQuery: <T>(queryFn: () => Promise<T>, tables: TableName<DB>[], options: Omit<VueReactiveQueryOptions<T, DB>, "tables" | "enabled">) => ReactiveQuery<T>;
 }
 /**
  * Binds the reactive-db primitives to Vue's lifecycle once, and returns the composables an app
  * calls everywhere. The change bus and the metrics recorder are app-owned singletons, so they are
  * injected here rather than created per query.
- */
-declare function createReactiveQuery(deps: CreateReactiveQueryDeps): ReactiveQueryComposables;
-//#endregion
-//#region src/queryKeys.d.ts
-/**
- * A key unique to this call, so the query is never deduplicated against another and its
- * `cacheTime` window is its own.
  *
- * A `queryKey` is an *identity*: two mounted queries sharing one await a single request and share
- * the result. That is what you want for the same list rendered twice, and wrong for two different
- * queries that happen to be named alike - the second would be handed the first's rows. Reach for a
- * stable literal only when sharing is the intent; otherwise call this.
+ * Pass the schema - `createReactiveQuery<Database>({...})` - and every `tables` entry is checked
+ * against it. A misspelt table name is the one mistake this library cannot report at run time: the
+ * query subscribes to nothing and simply never refetches.
+ *
+ * `deps` is `NoInfer` because `keyof DB` is not an inference site TypeScript can invert: handed an
+ * already-typed `onTableChange`, it solved DB as a union of one object per table, and every
+ * `tables` entry in the app then failed against `never`. Now the schema comes from the type
+ * argument or not at all.
  */
-declare function uniqueQueryKey(prefix: string): string;
+declare function createReactiveQuery<DB = Record<string, unknown>>(deps: NoInfer<CreateReactiveQueryDeps<DB>>): ReactiveQueryComposables<DB>;
 //#endregion
 //#region src/queryMetrics.d.ts
 interface VueQueryMetricsOptions {
@@ -114,4 +118,4 @@ interface VueQueryMetrics {
  */
 declare function createVueQueryMetrics(options?: VueQueryMetricsOptions): VueQueryMetrics;
 //#endregion
-export { CreateReactiveQueryDeps, QueryMetricsView, ReactiveQuery, ReactiveQueryComposables, ReactiveQueryLogger, VueQueryMetrics, VueQueryMetricsOptions, VueReactiveQueryOptions, createReactiveQuery, createVueQueryMetrics, uniqueQueryKey };
+export { CreateReactiveQueryDeps, QueryMetricsView, ReactiveQuery, ReactiveQueryComposables, ReactiveQueryLogger, VueQueryMetrics, VueQueryMetricsOptions, VueReactiveQueryOptions, createReactiveQuery, createVueQueryMetrics };

package/dist/index.mjs

@@ -1,8 +1,32 @@
-import { computed, isRef, onMounted, onUnmounted, reactive, ref, watch } from "vue";
-import { calcRetryDelay, createQueryMetrics, createVisibilityGate, noopMetrics } from "@cavulsqa/reactive-db";
+import { computed, isRef, onMounted, onUnmounted, reactive, ref, toValue, watch } from "vue";
+import { calcRetryDelay, createQueryMetrics, createVisibilityGate, hashQueryKey, noopMetrics } from "@cavulsqa/reactive-db";
+//#region src/queryKey.ts
+/**
+* Reads a key, unwrapping any refs inside it.
+*
+* `toValue` alone resolves the container, not its contents, so `["search", term]` hashed the ref
+* object itself: the hash never moved when the term did, and reading `_value` rather than `.value`
+* tracked nothing either - the key looked reactive and was not. Unwrapping here means the read
+* happens inside the caller's `computed`, which is what makes the dependency real.
+*/
+function resolveQueryKey(key) {
+	return toValue(key).map(unwrapRefs);
+}
+function unwrapRefs(value) {
+	if (isRef(value)) return unwrapRefs(value.value);
+	if (Array.isArray(value)) return value.map(unwrapRefs);
+	if (isPlainObject(value)) return Object.fromEntries(Object.entries(value).map(([field, inner]) => [field, unwrapRefs(inner)]));
+	return value;
+}
+function isPlainObject(value) {
+	if (value === null || typeof value !== "object") return false;
+	const prototype = Object.getPrototypeOf(value);
+	return prototype === Object.prototype || prototype === null;
+}
+//#endregion
 //#region src/reactiveQuery.ts
 const DEFAULT_DEBOUNCE = 100;
-const ALWAYS_VISIBLE = { value: true };
+const ALWAYS_VISIBLE = computed(() => true);
 const consoleLogger = {
 	debug: (message, ...details) => console.log(message, ...details),
 	warn: (message, ...details) => console.warn(message, ...details),
@@ -12,6 +36,15 @@ const consoleLogger = {
 * Binds the reactive-db primitives to Vue's lifecycle once, and returns the composables an app
 * calls everywhere. The change bus and the metrics recorder are app-owned singletons, so they are
 * injected here rather than created per query.
+*
+* Pass the schema - `createReactiveQuery<Database>({...})` - and every `tables` entry is checked
+* against it. A misspelt table name is the one mistake this library cannot report at run time: the
+* query subscribes to nothing and simply never refetches.
+*
+* `deps` is `NoInfer` because `keyof DB` is not an inference site TypeScript can invert: handed an
+* already-typed `onTableChange`, it solved DB as a union of one object per table, and every
+* `tables` entry in the app then failed against `never`. Now the schema comes from the type
+* argument or not at all.
 */
 function createReactiveQuery(deps) {
 	const metrics = deps.metrics ?? noopMetrics;
@@ -20,24 +53,24 @@ function createReactiveQuery(deps) {
 	const logger = deps.logger ?? consoleLogger;
 	const inFlightQueries = /* @__PURE__ */ new Map();
 	const watchedTablesByKey = /* @__PURE__ */ new Map();
-	function claimKey(queryKey, tables) {
+	function claimKey(key, tables) {
 		const signature = [...tables].sort().join(",");
-		const existing = watchedTablesByKey.get(queryKey);
+		const existing = watchedTablesByKey.get(key);
 		if (!existing) {
-			watchedTablesByKey.set(queryKey, {
+			watchedTablesByKey.set(key, {
 				tables: signature,
 				holders: 1
 			});
 			return;
 		}
-		if (warnOnKeyConflict && existing.tables !== signature) logger.warn(`[useReactiveQuery] queryKey "${queryKey}" is mounted twice watching different tables ("${existing.tables}" and "${signature}"). These are different queries sharing an identity, so one will receive the other's result. Use uniqueQueryKey() for a key that is never shared.`);
+		if (warnOnKeyConflict && existing.tables !== signature) logger.warn(`[useReactiveQuery] the key ${key} is mounted twice watching different tables ("${existing.tables}" and "${signature}"). These are different queries sharing an identity, so one will receive the other's result. Add what distinguishes them to the key.`);
 		existing.holders += 1;
 	}
-	function releaseKey(queryKey) {
-		const existing = watchedTablesByKey.get(queryKey);
+	function releaseKey(key) {
+		const existing = watchedTablesByKey.get(key);
 		if (!existing) return;
 		existing.holders -= 1;
-		if (existing.holders <= 0) watchedTablesByKey.delete(queryKey);
+		if (existing.holders <= 0) watchedTablesByKey.delete(key);
 	}
 	function useReactiveQuery(queryFn, options) {
 		const data = ref(null);
@@ -55,7 +88,7 @@ function createReactiveQuery(deps) {
 		const debounceMs = options.debounce ?? DEFAULT_DEBOUNCE;
 		const enabledRef = isRef(options.enabled) ? options.enabled : ref(options.enabled !== false);
 		const fetchOnMount = options.fetchOnMount !== false;
-		const queryKey = options.queryKey;
+		const keyHash = computed(() => hashQueryKey(resolveQueryKey(options.queryKey)));
 		const cancelOnUnmount = options.cancelOnUnmount !== false;
 		const maxRetries = options.retry === false ? 0 : options.retry ?? 0;
 		const cacheAge = computed(() => cacheClock.value - lastFetchTime.value);
@@ -94,10 +127,11 @@ function createReactiveQuery(deps) {
 			});
 		}
 		async function executeQueryWithRetry(showLoading = true, attempt = 0, force = false) {
-			if (!force && inFlightQueries.has(queryKey)) {
-				if (options.debug) logger.debug(`[useReactiveQuery] Deduping query: ${queryKey}`);
+			const key = keyHash.value;
+			if (!force && inFlightQueries.has(key)) {
+				if (options.debug) logger.debug(`[useReactiveQuery] Deduping query: ${key}`);
 				try {
-					data.value = await inFlightQueries.get(queryKey);
+					data.value = await inFlightQueries.get(key);
 					metrics.recordCacheHit();
 				} catch {}
 				return;
@@ -110,7 +144,7 @@ function createReactiveQuery(deps) {
 			retryCount.value = attempt;
 			const startTime = performance.now();
 			const queryPromise = queryFn();
-			inFlightQueries.set(queryKey, queryPromise);
+			inFlightQueries.set(key, queryPromise);
 			try {
 				const result = await queryPromise;
 				if (requestId !== activeRequestId) return;
@@ -119,7 +153,7 @@ function createReactiveQuery(deps) {
 				isStale.value = false;
 				retryCount.value = 0;
 				const duration = performance.now() - startTime;
-				metrics.recordQuery(queryKey, duration);
+				metrics.recordQuery(key, duration);
 				if (options.debug) logger.debug(`[useReactiveQuery] Query executed (${duration.toFixed(1)}ms):`, result);
 				options.onSuccess?.(result);
 			} catch (err) {
@@ -127,7 +161,7 @@ function createReactiveQuery(deps) {
 				const errorObj = err instanceof Error ? err : new Error(String(err));
 				if (attempt < maxRetries) {
 					const delay = calcRetryDelay(attempt, options.retryDelay);
-					inFlightQueries.delete(queryKey);
+					inFlightQueries.delete(key);
 					if (options.debug) logger.debug(`[useReactiveQuery] Retry ${attempt + 1}/${maxRetries} in ${delay}ms`);
 					await waitForRetry(delay);
 					if (disposed || requestId !== activeRequestId) return;
@@ -136,14 +170,14 @@ function createReactiveQuery(deps) {
 				error.value = errorObj;
 				isStale.value = false;
 				logger.error("[useReactiveQuery] Query failed:", err);
-				metrics.recordError(queryKey);
+				metrics.recordError(key);
 				options.onError?.(errorObj);
 			} finally {
-				loading.value = false;
-				if (inFlightQueries.get(queryKey) === queryPromise) inFlightQueries.delete(queryKey);
+				if (requestId === activeRequestId) loading.value = false;
+				if (inFlightQueries.get(key) === queryPromise) inFlightQueries.delete(key);
 			}
 		}
-		function scheduledRefetch() {
+		function scheduledRefetch(changedTable) {
 			if (isCacheValidNow()) {
 				if (options.debug) logger.debug("[useReactiveQuery] Cache valid, skipping refetch");
 				metrics.recordCacheHit();
@@ -151,7 +185,7 @@ function createReactiveQuery(deps) {
 			}
 			if (debounceTimer) clearTimeout(debounceTimer);
 			debounceTimer = setTimeout(() => {
-				metrics.recordRefetch(options.tables[0] ?? "unknown");
+				if (changedTable) metrics.recordRefetch(changedTable);
 				executeQueryWithRetry();
 				debounceTimer = null;
 			}, debounceMs);
@@ -183,30 +217,45 @@ function createReactiveQuery(deps) {
 		const visibility = options.isVisible ?? resolveVisibility();
 		let unsubscribe = null;
 		let stopVisibilityWatch = null;
+		let stopKeyWatch = null;
+		let claimedKey = null;
 		let active = false;
 		function activate() {
 			if (active) return;
 			active = true;
-			claimKey(queryKey, options.tables);
+			claimedKey = keyHash.value;
+			claimKey(claimedKey, options.tables);
 			if (fetchOnMount) executeQueryWithRetry();
 			unsubscribe = deps.onTableChange(options.tables, (event) => {
 				if (options.debug) logger.debug("[useReactiveQuery] Table changed:", event);
 				if (!shouldTriggerRefetch(event)) return;
-				if (gate.recordChange(visibility.value) === "refetch") scheduledRefetch();
+				if (gate.recordChange(visibility.value) === "refetch") scheduledRefetch(event.table);
 			});
-			if (isRef(visibility)) stopVisibilityWatch = watch(visibility, (visible) => {
+			stopVisibilityWatch = watch(visibility, (visible) => {
 				if (visible && gate.recordVisible() === "refetch") scheduledRefetch();
 			});
+			stopKeyWatch = watch(keyHash, (next, previous) => {
+				releaseKey(previous);
+				claimKey(next, options.tables);
+				claimedKey = next;
+				lastFetchTime.value = 0;
+				scheduledRefetch();
+			});
 			metrics.incrementListeners();
 		}
 		function deactivate() {
 			if (!active) return;
 			active = false;
-			releaseKey(queryKey);
+			if (claimedKey !== null) {
+				releaseKey(claimedKey);
+				claimedKey = null;
+			}
 			unsubscribe?.();
 			unsubscribe = null;
 			stopVisibilityWatch?.();
 			stopVisibilityWatch = null;
+			stopKeyWatch?.();
+			stopKeyWatch = null;
 			metrics.decrementListeners();
 		}
 		let stopEnabledWatch = null;
@@ -253,22 +302,6 @@ function createReactiveQuery(deps) {
 	};
 }
 //#endregion
-//#region src/queryKeys.ts
-let instanceCounter = 0;
-/**
-* A key unique to this call, so the query is never deduplicated against another and its
-* `cacheTime` window is its own.
-*
-* A `queryKey` is an *identity*: two mounted queries sharing one await a single request and share
-* the result. That is what you want for the same list rendered twice, and wrong for two different
-* queries that happen to be named alike - the second would be handed the first's rows. Reach for a
-* stable literal only when sharing is the intent; otherwise call this.
-*/
-function uniqueQueryKey(prefix) {
-	instanceCounter += 1;
-	return `${prefix}#${instanceCounter}`;
-}
-//#endregion
 //#region src/queryMetrics.ts
 const SLOWEST_QUERY_COUNT = 5;
 /**
@@ -321,4 +354,4 @@ function createVueQueryMetrics(options = {}) {
 	};
 }
 //#endregion
-export { createReactiveQuery, createVueQueryMetrics, uniqueQueryKey };
+export { createReactiveQuery, createVueQueryMetrics };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cavulsqa/reactive-vue",
-  "version": "0.2.0",
+  "version": "1.0.0",
   "description": "Vue bindings for @cavulsqa/reactive-db: a reactive query composable, Framework7 page visibility, and a reactive metrics view.",
   "keywords": [
     "framework7",
@@ -33,17 +33,17 @@
     "access": "public"
   },
   "devDependencies": {
-    "@cavulsqa/reactive-db": "0.2.0",
-    "@types/node": "^26.1.1",
+    "@cavulsqa/reactive-db": "1.0.0",
+    "@types/node": "^24.12.2",
     "bumpp": "^11.1.0",
     "happy-dom": "^20.11.6",
-    "typescript": "^7.0.2",
+    "typescript": "^5.9.3",
     "vite": "npm:@voidzero-dev/vite-plus-core@0.3.0",
     "vite-plus": "0.3.0",
     "vue": "^3.5.41"
   },
   "peerDependencies": {
-    "@cavulsqa/reactive-db": "^0.2.0",
+    "@cavulsqa/reactive-db": "^1.0.0",
     "vue": ">=3.5"
   },
   "scripts": {