diff --git a/.changeset/big-mugs-admire.md b/.changeset/big-mugs-admire.md
new file mode 100644
index 000000000..d5fc87108
--- /dev/null
+++ b/.changeset/big-mugs-admire.md
@@ -0,0 +1,5 @@
+---
+"@powersync/vue": minor
+---
+
+Introduced `useQuery` and `useStatus` composables which include compilable query support. Deprecated `usePowerSyncQuery`, `usePowerSyncWatchedQuery`, and `usePowerSyncStatus`.
diff --git a/.changeset/seven-sheep-smell.md b/.changeset/seven-sheep-smell.md
new file mode 100644
index 000000000..170ec5042
--- /dev/null
+++ b/.changeset/seven-sheep-smell.md
@@ -0,0 +1,5 @@
+---
+"vue-supabase-todolist": patch
+---
+
+Using new Vue `useQuery` and `useStatus` composables instead of deprecated ones.
diff --git a/demos/vue-supabase-todolist/src/components/LoadingMessage.vue b/demos/vue-supabase-todolist/src/components/LoadingMessage.vue
index 8cfa023f5..c841ccd03 100644
--- a/demos/vue-supabase-todolist/src/components/LoadingMessage.vue
+++ b/demos/vue-supabase-todolist/src/components/LoadingMessage.vue
@@ -14,27 +14,27 @@
 </template>
 
 <script setup lang="ts">
-import { usePowerSyncStatus } from '@powersync/vue';
+import { useStatus } from '@powersync/vue';
 import { ref } from 'vue';
 import { watchEffect } from 'vue';
 import { computed } from 'vue';
 
-const { status } = usePowerSyncStatus();
+const status = useStatus();
 
 const props = defineProps({
-  loading: Boolean,
-  fetching: Boolean
+  isLoading: Boolean,
+  isFetching: Boolean
 });
 
 let dispose: (() => void) | undefined = undefined;
 const showLoadingMessage = ref(false);
 
 watchEffect(() => {
-  if (props.fetching || props.loading || !status.value.hasSynced) {
+  if (props.isFetching || props.isLoading || !status.value.hasSynced) {
     if (!dispose) {
       const timeout = setTimeout(() => {
         showLoadingMessage.value = true;
-      }, 100);
+      }, 300);
 
       dispose = () => clearTimeout(timeout);
     }
@@ -46,5 +46,5 @@ watchEffect(() => {
   }
 });
 
-const loadingMessage = computed(() => (props.loading ? 'Loading' : 'Re-executing query'));
+const loadingMessage = computed(() => (props.isLoading ? 'Loading' : 'Re-executing query'));
 </script>
diff --git a/demos/vue-supabase-todolist/src/components/widgets/TodoListsWidget.vue b/demos/vue-supabase-todolist/src/components/widgets/TodoListsWidget.vue
index 4aea95035..14456484e 100644
--- a/demos/vue-supabase-todolist/src/components/widgets/TodoListsWidget.vue
+++ b/demos/vue-supabase-todolist/src/components/widgets/TodoListsWidget.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="py-10 pa-2">
-    <LoadingMessage :loading :fetching />
+    <LoadingMessage v-if="isLoading || isFetching" :isLoading :isFetching />
 
     <ErrorMessage v-if="error">{{ error.message }}</ErrorMessage>
     <v-list v-else class="bg-black pa-0" lines="two">
@@ -18,10 +18,10 @@
 
 <script setup lang="ts">
 import { LISTS_TABLE, ListRecord, TODOS_TABLE } from '@/library/powersync/AppSchema';
-import { TODO_LISTS_ROUTE } from '@/plugins/router'; // Adjust this import according to your project's structure
-import { usePowerSync, usePowerSyncWatchedQuery } from '@powersync/vue'; // Adjust according to your actual implementation
+import { TODO_LISTS_ROUTE } from '@/plugins/router';
+import { usePowerSync, useQuery } from '@powersync/vue';
 import { useRouter } from 'vue-router';
-import ListItemWidget from './ListItemWidget.vue'; // Ensure this path is correct
+import ListItemWidget from './ListItemWidget.vue';
 import LoadingMessage from '../LoadingMessage.vue';
 
 const powerSync = usePowerSync();
@@ -31,10 +31,10 @@ const router = useRouter();
 
 const {
   data: listRecords,
-  loading,
-  fetching,
+  isLoading,
+  isFetching,
   error
-} = usePowerSyncWatchedQuery<ListRecord & { total_tasks: number; completed_tasks: number }>(`
+} = useQuery<ListRecord & { total_tasks: number; completed_tasks: number }>(`
       SELECT
         ${LISTS_TABLE}.*, COUNT(${TODOS_TABLE}.id) AS total_tasks, SUM(CASE WHEN ${TODOS_TABLE}.completed = true THEN 1 ELSE 0 END) as completed_tasks
       FROM
diff --git a/demos/vue-supabase-todolist/src/views/SqlConsole.vue b/demos/vue-supabase-todolist/src/views/SqlConsole.vue
index c1698909d..a502802f2 100644
--- a/demos/vue-supabase-todolist/src/views/SqlConsole.vue
+++ b/demos/vue-supabase-todolist/src/views/SqlConsole.vue
@@ -5,7 +5,7 @@
       <v-btn @click="executeQuery" class="ml-2" color="primary" height="auto">Execute Query</v-btn>
     </div>
     <div class="mt-9">
-      <LoadingMessage v-if="loading || fetching" :loading :fetching />
+      <LoadingMessage v-if="isLoading || isFetching" :isLoading :isFetching />
       <ErrorMessage v-if="error">{{ error.message }}</ErrorMessage>
       <v-container v-else-if="queryDataGridResult.columns.length > 0" class="mt-4 pa-0" fluid>
         <v-data-table
@@ -21,13 +21,13 @@
 
 <script setup lang="ts">
 import { ref, computed } from 'vue';
-import { usePowerSyncWatchedQuery } from '@powersync/vue';
+import { useQuery } from '@powersync/vue';
 const query = ref('SELECT * FROM lists');
 const inputText = ref(query.value);
 const executeQuery = () => {
   query.value = inputText.value;
 };
-const { data: querySQLResult, loading, fetching, error } = usePowerSyncWatchedQuery(query);
+const { data: querySQLResult, isLoading, isFetching, error } = useQuery(query);
 const queryDataGridResult = computed(() => {
   const firstItem = querySQLResult.value?.[0];
   return {
diff --git a/demos/vue-supabase-todolist/src/views/TodoListsEdit.vue b/demos/vue-supabase-todolist/src/views/TodoListsEdit.vue
index 20dc00867..89b33db31 100644
--- a/demos/vue-supabase-todolist/src/views/TodoListsEdit.vue
+++ b/demos/vue-supabase-todolist/src/views/TodoListsEdit.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="py-10">
-    <LoadingMessage v-if="loading || fetching" :loading :fetching />
+    <LoadingMessage v-if="isLoading || isFetching" :isLoading :isFetching />
     <v-list v-if="listName" class="pa-2 bg-black" lines="one">
       <ErrorMessage v-if="error">{{ error.message }}</ErrorMessage>
       <TodoItemWidget
@@ -13,7 +13,7 @@
         @toggle-completion="toggleCompletion(record, !record.completed)"
       />
     </v-list>
-    <h2 v-else-if="!loading" class="text-subtitle-1">No matching List found, please navigate back...</h2>
+    <h2 v-else-if="!isLoading" class="text-subtitle-1">No matching List found, please navigate back...</h2>
 
     <v-dialog v-model="showPrompt" width="350" opacity="0.5" scrim="black">
       <v-card title="Create Todo Item" class="bg-surface-light">
@@ -48,7 +48,7 @@ import TodoItemWidget from '@/components/widgets/TodoItemWidget.vue';
 import { LISTS_TABLE, TODOS_TABLE, TodoRecord } from '@/library/powersync/AppSchema';
 import { pageSubtitle } from '@/main';
 import { supabase } from '@/plugins/supabase';
-import { usePowerSync, usePowerSyncWatchedQuery } from '@powersync/vue';
+import { usePowerSync, useQuery } from '@powersync/vue';
 import { watch } from 'vue';
 import { onUnmounted } from 'vue';
 import { ref } from 'vue';
@@ -64,10 +64,7 @@ const setShowPrompt = (state: boolean): void => {
   showPrompt.value = state;
 };
 const { id: listID = '' } = useRoute().params;
-const { data: listRecords } = usePowerSyncWatchedQuery<{ name: string }>(
-  `SELECT name FROM ${LISTS_TABLE} WHERE id = ?`,
-  [listID]
-);
+const { data: listRecords } = useQuery<{ name: string }>(`SELECT name FROM ${LISTS_TABLE} WHERE id = ?`, [listID]);
 
 const listName = computed(() => listRecords.value[0]?.name);
 watch(listName, () => {
@@ -79,12 +76,10 @@ onUnmounted(() => {
 
 const {
   data: todoRecords,
-  loading,
-  fetching,
+  isLoading,
+  isFetching,
   error
-} = usePowerSyncWatchedQuery<TodoRecord>(`SELECT * FROM ${TODOS_TABLE} WHERE list_id=? ORDER BY created_at DESC, id`, [
-  listID
-]);
+} = useQuery<TodoRecord>(`SELECT * FROM ${TODOS_TABLE} WHERE list_id=? ORDER BY created_at DESC, id`, [listID]);
 
 const toggleCompletion = async (record: TodoRecord, completed: boolean) => {
   const updatedRecord = { ...record, completed: completed };
diff --git a/demos/vue-supabase-todolist/src/views/layouts/Layout.vue b/demos/vue-supabase-todolist/src/views/layouts/Layout.vue
index ac50befe5..1d21c99dd 100644
--- a/demos/vue-supabase-todolist/src/views/layouts/Layout.vue
+++ b/demos/vue-supabase-todolist/src/views/layouts/Layout.vue
@@ -41,10 +41,10 @@ import { supabase } from '@/plugins/supabase';
 import { computed, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { pageSubtitle } from '@/main';
-import { usePowerSyncStatus } from '@powersync/vue';
+import { useStatus } from '@powersync/vue';
 
 const openDrawer = ref(false);
-const { status: syncStatus } = usePowerSyncStatus();
+const syncStatus = useStatus();
 const router = useRouter();
 const route = useRoute();
 
diff --git a/packages/vue/README.md b/packages/vue/README.md
index 60265fd44..cd279ddc0 100644
--- a/packages/vue/README.md
+++ b/packages/vue/README.md
@@ -23,7 +23,7 @@ app.use(powerSyncPlugin);
 app.mount('#app');
 ```
 
-### Overriding the PowerSync instance
+## Overriding the PowerSync instance
 
 The `createPowerSyncPlugin` function is designed for setting up a PowerSync client that is available across your entire Vue application. It's the recommended approach for package setup. However, there may be situations where an app-wide setup isn't suitable, or you need a different PowerSync client for specific parts of your application.
 
@@ -43,7 +43,7 @@ providePowerSync(db);
 </script>
 ```
 
-### Accessing PowerSync
+## Accessing PowerSync
 
 The provided PowerSync client is available with the `usePowerSync` composable.
 
@@ -65,75 +65,108 @@ powersync.value.getAll('SELECT * from lists').then((l) => list.value = l);
 </template>
 ```
 
-### Queries
+## Query
 
-The `usePowerSyncQuery` composable provides a static view of a given query. You can use refs as parameters instead to automatically refresh the query when they change. The composable exposes reactive variables for the results, the loading state and error state, as well as a refresh callback that can be invoked to rerun the query manually.
+The `useQuery` composable provides a dynamic view of a given query. The data will automatically update when a dependent table is updated.
+
+You can use refs as parameters to refresh the query when they change. The composable exposes reactive variables for the results as well as the loading, fetching, and and error states. Note that `isLoading` indicates that the initial result is being retrieved and `isFetching` indicates the query is fetching data, which could be for the initial load or any time when the query is re-evaluating due to a change in a dependent table.
 
 ```Vue
 // TodoListDisplayQuery.vue
 <script setup>
-import { usePowerSyncQuery } from '@powersync/vue';
+import { usePowerSync, useQuery } from '@powersync/vue';
 import { ref } from 'vue';
 
 const query = ref('SELECT * from lists');
-const { data: list, error, loading, refresh} = usePowerSyncQuery(query);
+const { data:list, isLoading, isFetching, error} = useQuery(query);
+
+const powersync = usePowerSync();
+const addList = () => {
+    powersync.value.execute('INSERT INTO lists (id, name) VALUES (?, ?)', [Math.round(Math.random() * 1000), 'list name']);
+}
 </script>
 
 <template>
     <input v-model="query" />
-    <div v-if="loading">Loading...</div>
-    <div v-else-if="error">{{ error }}</div>
+    <div v-if="isLoading">Loading...</div>
+    <div v-else-if="isFetching">Updating results...</div>
+
+    <div v-if="error">{{ error }}</div>
     <ul v-else>
         <li v-for="l in list" :key="l.id">{{ l.name }}</li>
     </ul>
-    <button @click="refresh">Refresh</button>
+    <button @click="addList">Add list</button>
 </template>
 ```
 
-### Watched Queries
+### Static query
 
-The `usePowerSyncWatchedQuery` composable provides a dynamic view of a given query. The data will automatically update when a dependent table is updated.
-
-You can use refs as parameters to refresh the query when they change. The composable exposes reactive variables for the results as well as the loading, fetching, and and error states. Note that `loading` initicates that the initial result is being retrieved and `fetching` indicates the query is fetching data, which could be for the initial load or any time when the query is re-evaluating due to a change in a dependent table.
+The `useQuery` composable can be configured to only execute initially and not every time changes to dependent tables are detected. The query can be manually re-executed by using the returned `refresh` function.
 
 ```Vue
-// TodoListDisplayWatchedQuery.vue
+// TodoListDisplayStaticQuery.vue
 <script setup>
-import { usePowerSync, usePowerSyncWatchedQuery } from '@powersync/vue';
-import { ref } from 'vue';
+import { useQuery } from '@powersync/vue';
 
-const query = ref('SELECT * from lists');
-const { data: list, loading, fetching, error} = usePowerSyncWatchedQuery(query);
-
-const powersync = usePowerSync();
-const addList = () => {
-    powersync.value.execute('INSERT INTO lists (id, name) VALUES (?, ?)', [Math.round(Math.random() * 1000), 'list name']);
-}
+const { data: list, refresh } = useQuery('SELECT id, name FROM lists', [], {
+  runQueryOnce: true
+});
 </script>
 
 <template>
-    <input v-model="query" />
-    <div v-if="loading">Loading...</div>
-    <div v-else-if="fetching">Updating results...</div>
+  <ul>
+    <li v-for="l in list" :key="l.name">{{ l.name }} + {{ l.id }}</li>
+  </ul>
+  <button @click="refresh">Refresh list</button>
+</template>
 
-    <div v-if="error">{{ error }}</div>
-    <ul v-else>
-        <li v-for="l in list" :key="l.id">{{ l.name }}</li>
-    </ul>
-    <button @click="addList">Add list</button>
+```
+
+### TypeScript Support
+
+A type can be specified for each row returned by `useQuery`. Remember to declare `lang="ts"` when defining a `script setup` block.
+
+```Vue
+// TodoListDisplayStaticQueryTypeScript.vue
+<script setup lang="ts">
+import { useQuery } from '@powersync/vue';
+
+const { data } = useQuery<{ id: string, name: string }>('SELECT id, name FROM lists');
+</script>
+
+<template>
+   <ul>
+       <li v-for="l in data" :key="l.id">{{ l.name }}</li>
+   </ul>
 </template>
 ```
 
-### Connection Status
+You are also able to use a compilable query (e.g. [Kysely queries](https://github.com/powersync-ja/powersync-js/tree/main/packages/kysely-driver)) as a query argument in place of a SQL statement string.
+
+```Vue
+// TodolistDisplayQueryKysely.vue
+<script setup lang="ts">
+import { usePowerSync, useQuery } from '@powersync/vue';
+import { wrapPowerSyncWithKysely } from '@powersync/kysely-driver';
+import { Database } from '@/library/powersync/AppSchema';
+
+const powerSync = usePowerSync();
+const db = wrapPowerSyncWithKysely<Database>(powerSync.value);
+
+const { data } = useQuery(db.selectFrom('lists').selectAll().where('name', 'like', '%Shopping%'));
+</script>
+```
+
+## Connection Status
 
-The `usePowerSyncStatus` composable provides general connectivity information such as the connection status, whether the initial full sync has completed, when the last sync completed, and whether any data is being uploaded or downloaded.
+The `useStatus` composable provides general connectivity information such as the connection status, whether the initial full sync has completed, when the last sync completed, and whether any data is being uploaded or downloaded.
 
 ```Vue
 // ConnectionStatus.vue
 <script setup>
-import { usePowerSyncStatus } from '@powersync/vue';
+import { useStatus } from '@powersync/vue';
 
-const { status } = usePowerSyncStatus();
+const status = useStatus();
 </script>
 
 <template>
@@ -150,7 +183,7 @@ const { status } = usePowerSyncStatus();
 
 ### Top-level setup block
 
-The `usePowersync`, `usePowerSyncQuery`, `usePowerSyncWatchedQuery`, and `usePowerSyncStatus` composables are meant to be invoked in the top-level setup block. Vue expects certain Composition API functions, like `inject` which this package depends on, to be resolved in the setup context and not inside nested or asynchronous functions. For use cases where you need to do this, you should access the PowerSync `AbstractPowerSyncDatabase` instance directly - like exporting it as singleton after configuring Vue with it in `main.js`.
+The `usePowersync`, `useQuery`, and `useStatus` composables are meant to be invoked in the top-level setup block. Vue expects certain Composition API functions, like `inject` which this package depends on, to be resolved in the setup context and not inside nested or asynchronous functions. For use cases where you need to do this, you should access the PowerSync `AbstractPowerSyncDatabase` instance directly - like exporting it as singleton after configuring Vue with it in `main.js`.
 
 Incorrect Usage Example:
 Using PowerSync composables in a nested function of a component.
diff --git a/packages/vue/package.json b/packages/vue/package.json
index 129cd9c3e..0fd462a37 100644
--- a/packages/vue/package.json
+++ b/packages/vue/package.json
@@ -14,7 +14,8 @@
   "scripts": {
     "build": "tsc -b",
     "clean": "rm -rf lib tsconfig.tsbuildinfo",
-    "watch": "tsc -b -w"
+    "watch": "tsc -b -w",
+    "test": "vitest"
   },
   "repository": {
     "type": "git",
@@ -33,7 +34,10 @@
     "vue": "*"
   },
   "devDependencies": {
+    "flush-promises": "^1.0.2",
+    "jsdom": "^24.0.0",
     "typescript": "^5.1.3",
+    "vitest": "^1.5.1",
     "vue": "3.4.21"
   }
 }
diff --git a/packages/vue/src/composables/usePowerSyncQuery.ts b/packages/vue/src/composables/usePowerSyncQuery.ts
index ec39e656a..016b94dfe 100644
--- a/packages/vue/src/composables/usePowerSyncQuery.ts
+++ b/packages/vue/src/composables/usePowerSyncQuery.ts
@@ -17,6 +17,8 @@ export type QueryOptions = {
 export type Result<T> = { data: Ref<T[]>; loading: Ref<boolean>; error: Ref<Error>; refresh: () => Promise<void> };
 
 /**
+ * @deprecated use {@link useQuery} instead.
+ *
  * A composable to access a single static query.
  * SQL Statement and query Parameters are watched by default.
  * For a result that updates as the source data changes, use {@link usePowerSyncWatchedQuery} instead.
@@ -28,7 +30,7 @@ export const usePowerSyncQuery = <T = any>(
 ): Result<T> => {
   const data = ref([]);
   const loading = ref<boolean>(false);
-  const error = ref<Error>(undefined);
+  const error = ref<Error | undefined>(undefined);
 
   const powerSync = usePowerSync();
 
@@ -47,7 +49,7 @@ export const usePowerSyncQuery = <T = any>(
       data.value = [];
 
       const wrappedError = new Error('PowerSync failed to fetch data: ' + e.message);
-      wrappedError.cause = e; // Include the original error as the cause
+      wrappedError.cause = e;
       error.value = wrappedError;
     } finally {
       loading.value = false;
@@ -57,6 +59,7 @@ export const usePowerSyncQuery = <T = any>(
   if (queryOptions.watchParameters) {
     watch([powerSync, ref(sqlStatement), ref(parameters)], fetchData);
   }
+
   if (queryOptions.immediate) {
     fetchData();
   }
diff --git a/packages/vue/src/composables/usePowerSyncStatus.ts b/packages/vue/src/composables/usePowerSyncStatus.ts
index daee81343..6afec3e2a 100644
--- a/packages/vue/src/composables/usePowerSyncStatus.ts
+++ b/packages/vue/src/composables/usePowerSyncStatus.ts
@@ -1,29 +1,32 @@
 import { SyncStatus } from '@powersync/common';
-import { onUnmounted, ref } from 'vue';
+import { ref, watchEffect } from 'vue';
 import { usePowerSync } from './powerSync';
 
+/**
+ * @deprecated Use {@link useStatus} instead.
+ */
 export const usePowerSyncStatus = () => {
+  const powerSync = usePowerSync();
   const status = ref(new SyncStatus({}));
 
-  let cleanup = () => {};
-  const powerSync = usePowerSync();
-  if (powerSync) {
-    status.value = powerSync.value.currentStatus || status.value;
+  if (!powerSync) {
+    return status;
+  }
+
+  status.value = powerSync.value.currentStatus || status.value;
 
-    const disposeListener = powerSync.value.registerListener({
+  watchEffect((onCleanup) => {
+    const listener = powerSync.value.registerListener({
       statusChanged: (newStatus: SyncStatus) => {
         status.value = newStatus;
       }
     });
 
-    cleanup = () => {
-      disposeListener();
-    };
-  }
-
-  onUnmounted(() => {
-    cleanup();
+    // Cleanup previous listener when the effect triggers again, or when the component is unmounted
+    onCleanup(() => {
+      listener();
+    });
   });
 
-  return { status };
+  return status;
 };
diff --git a/packages/vue/src/composables/usePowerSyncWatchedQuery.ts b/packages/vue/src/composables/usePowerSyncWatchedQuery.ts
index c3c7e4628..142f45365 100644
--- a/packages/vue/src/composables/usePowerSyncWatchedQuery.ts
+++ b/packages/vue/src/composables/usePowerSyncWatchedQuery.ts
@@ -16,6 +16,8 @@ export type WatchedQueryResult<T> = {
 };
 
 /**
+ * @deprecated use {@link useQuery} instead.
+ *
  * A composable to access the results of a watched query.
  */
 export const usePowerSyncWatchedQuery = <T = any>(
@@ -24,7 +26,7 @@ export const usePowerSyncWatchedQuery = <T = any>(
   options: Omit<SQLWatchOptions, 'signal'> = {}
 ): WatchedQueryResult<T> => {
   const data = ref([]);
-  const error = ref<Error>(undefined);
+  const error = ref<Error | undefined>(undefined);
 
   const loading = ref(true);
   const fetching = ref(true);
diff --git a/packages/vue/src/composables/useQuery.ts b/packages/vue/src/composables/useQuery.ts
new file mode 100644
index 000000000..707b4ffc2
--- /dev/null
+++ b/packages/vue/src/composables/useQuery.ts
@@ -0,0 +1,155 @@
+import { type SQLWatchOptions, parseQuery, type CompilableQuery, ParsedQuery } from '@powersync/common';
+import { type MaybeRef, type Ref, ref, toValue, watchEffect } from 'vue';
+import { usePowerSync } from './powerSync';
+
+interface AdditionalOptions extends Omit<SQLWatchOptions, 'signal'> {
+  runQueryOnce?: boolean;
+}
+
+export type WatchedQueryResult<T> = {
+  data: Ref<T[]>;
+  /**
+   * Indicates the initial loading state (hard loading). Loading becomes false once the first set of results from the watched query is available or an error occurs.
+   */
+  isLoading: Ref<boolean>;
+  /**
+   * Indicates whether the query is currently fetching data, is true during the initial load and any time when the query is re-evaluating (useful for large queries).
+   */
+  isFetching: Ref<boolean>;
+  error: Ref<Error | undefined>;
+  /**
+   * Function used to run the query again.
+   */
+  refresh?: () => Promise<void>;
+};
+
+/**
+ * A composable to access the results of a watched query.
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { useQuery } from '@powersync/vue';
+ *
+ * const { data, isLoading, isFetching, error} = useQuery('SELECT * FROM lists');
+ * </script>
+ *
+ * <template>
+ *    <div v-if="isLoading">Loading...</div>
+ *    <div v-else-if="isFetching">Updating results...</div>
+ *
+ *    <div v-if="error">{{ error }}</div>
+ *    <ul v-else>
+ *        <li v-for="l in data" :key="l.id">{{ l.name }}</li>
+ *    </ul>
+ * </template>
+ * ```
+ */
+export const useQuery = <T = any>(
+  query: MaybeRef<string | CompilableQuery<T>>,
+  sqlParameters: MaybeRef<any[]> = [],
+  options: AdditionalOptions = {}
+): WatchedQueryResult<T> => {
+  const data = ref<T[]>([]) as Ref<T[]>;
+  const error = ref<Error | undefined>(undefined);
+  const isLoading = ref(true);
+  const isFetching = ref(true);
+
+  // Only defined when the query and parameters are successfully parsed and tables are resolved
+  let fetchData: () => Promise<void> | undefined;
+
+  const powerSync = usePowerSync();
+
+  const finishLoading = () => {
+    isLoading.value = false;
+    isFetching.value = false;
+  };
+
+  if (!powerSync) {
+    finishLoading();
+    error.value = new Error('PowerSync not configured.');
+    return { data, isLoading, isFetching, error };
+  }
+
+  const handleResult = (result: T[]) => {
+    finishLoading();
+    data.value = result;
+    error.value = undefined;
+  };
+
+  const handleError = (e: Error) => {
+    fetchData = undefined;
+    finishLoading();
+    data.value = [];
+
+    const wrappedError = new Error('PowerSync failed to fetch data: ' + e.message);
+    wrappedError.cause = e;
+    error.value = wrappedError;
+  };
+
+  const _fetchData = async (sql: string, parameters: any[]) => {
+    isFetching.value = true;
+    try {
+      const result = await powerSync.value.getAll<T>(sql, parameters);
+      handleResult(result);
+    } catch (e) {
+      console.error('Failed to fetch data:', e);
+      handleError(e);
+    }
+  };
+
+  watchEffect(async (onCleanup) => {
+    const abortController = new AbortController();
+    // Abort any previous watches when the effect triggers again, or when the component is unmounted
+    onCleanup(() => abortController.abort());
+
+    let parsedQuery: ParsedQuery;
+    try {
+      parsedQuery = parseQuery(toValue(query), toValue(sqlParameters));
+    } catch (e) {
+      console.error('Failed to parse query:', e);
+      handleError(e);
+      return;
+    }
+
+    const { sqlStatement: sql, parameters } = parsedQuery;
+
+    let resolvedTables = [];
+    try {
+      resolvedTables = await powerSync.value.resolveTables(sql, parameters, options);
+    } catch (e) {
+      console.error('Failed to fetch tables:', e);
+      handleError(e);
+      return;
+    }
+    // Fetch initial data
+    fetchData = () => _fetchData(sql, parameters);
+    await fetchData();
+
+    if (options.runQueryOnce) {
+      return;
+    }
+
+    powerSync.value.onChangeWithCallback(
+      {
+        onChange: async () => {
+          await fetchData();
+        },
+        onError: handleError
+      },
+      {
+        ...options,
+        signal: abortController.signal,
+        tables: resolvedTables
+      }
+    );
+  });
+
+  return {
+    data,
+    isLoading,
+    isFetching,
+    error,
+    refresh: () => fetchData?.()
+  };
+};
diff --git a/packages/vue/src/composables/useStatus.ts b/packages/vue/src/composables/useStatus.ts
new file mode 100644
index 000000000..907eec38a
--- /dev/null
+++ b/packages/vue/src/composables/useStatus.ts
@@ -0,0 +1,15 @@
+import { usePowerSyncStatus } from './usePowerSyncStatus';
+
+/**
+ * Retrieve the current synchronization status of PowerSync.
+ * @returns SyncStatus
+ * @example
+ * ```vue
+ * <script setup>
+ * import { useStatus } from '@powersync/vue';
+ *
+ * const status = useStatus();
+ * <script>
+ * ```
+ */
+export const useStatus = usePowerSyncStatus;
diff --git a/packages/vue/src/index.ts b/packages/vue/src/index.ts
index a2f9aa1a4..7a034c1e7 100644
--- a/packages/vue/src/index.ts
+++ b/packages/vue/src/index.ts
@@ -1,4 +1,6 @@
 export * from './composables/powerSync';
-export * from './composables/usePowerSyncQuery';
-export * from './composables/usePowerSyncStatus';
-export * from './composables/usePowerSyncWatchedQuery';
+export { usePowerSyncQuery } from './composables/usePowerSyncQuery';
+export { usePowerSyncStatus } from './composables/usePowerSyncStatus';
+export { usePowerSyncWatchedQuery } from './composables/usePowerSyncWatchedQuery';
+export { useQuery } from './composables/useQuery';
+export { useStatus } from './composables/useStatus';
diff --git a/packages/vue/tests/tsconfig.json b/packages/vue/tests/tsconfig.json
new file mode 100644
index 000000000..ad939a2db
--- /dev/null
+++ b/packages/vue/tests/tsconfig.json
@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "baseUrl": "../",
+    "esModuleInterop": true,
+    "jsx": "react",
+    "rootDir": "../",
+    "composite": true,
+    "outDir": "./lib",
+    "lib": [
+      "esnext",
+      "DOM"
+    ],
+    "module": "esnext",
+    "sourceMap": true,
+    "moduleResolution": "node",
+    "noFallthroughCasesInSwitch": true,
+    "noImplicitReturns": true,
+    "noImplicitUseStrict": false,
+    "noStrictGenericChecks": false,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "target": "esnext"
+  },
+  "include": [
+    "../src/**/*"
+  ]
+}
diff --git a/packages/vue/tests/useQuery.test.ts b/packages/vue/tests/useQuery.test.ts
new file mode 100644
index 000000000..a9adce93b
--- /dev/null
+++ b/packages/vue/tests/useQuery.test.ts
@@ -0,0 +1,143 @@
+import flushPromises from 'flush-promises';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { ref } from 'vue';
+import * as PowerSync from '../src/composables/powerSync';
+import { useQuery } from '../src/composables/useQuery';
+import { withSetup } from './utils';
+
+const mockPowerSync = {
+  currentStatus: { status: 'initial' },
+  registerListener: vi.fn(() => ({
+    statusChanged: vi.fn(() => 'updated')
+  })),
+  resolveTables: vi.fn(),
+  watch: vi.fn(),
+  onChangeWithCallback: vi.fn(),
+  getAll: vi.fn(() => ['list1', 'list2'])
+};
+
+describe('useQuery', () => {
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('should error when PowerSync is not set', () => {
+    vi.spyOn(PowerSync, 'usePowerSync').mockReturnValue(undefined);
+
+    const [{ data, isLoading, isFetching, error }] = withSetup(() => useQuery('SELECT * from lists'));
+
+    expect(error.value).toEqual(Error('PowerSync not configured.'));
+    expect(isFetching.value).toEqual(false);
+    expect(isLoading.value).toEqual(false);
+    expect(data.value).toEqual([]);
+  });
+
+  it('should handle error in watchEffect', async () => {
+    vi.spyOn(PowerSync, 'usePowerSync').mockReturnValue(ref({}) as any);
+
+    const [{ data, isLoading, isFetching, error }] = withSetup(() => useQuery('SELECT * from lists'));
+
+    expect(error.value).toEqual(
+      Error('PowerSync failed to fetch data: powerSync.value.resolveTables is not a function')
+    );
+    expect(isFetching.value).toEqual(false);
+    expect(isLoading.value).toEqual(false);
+    expect(data.value).toEqual([]);
+  });
+
+  it('should run the query once when runQueryOnce flag is set', async () => {
+    vi.spyOn(PowerSync, 'usePowerSync').mockReturnValue(ref(mockPowerSync) as any);
+    const getAllSpy = mockPowerSync.getAll;
+
+    const [{ data, isLoading, isFetching, error }] = withSetup(() =>
+      useQuery('SELECT * from lists', [], { runQueryOnce: true })
+    );
+    await flushPromises();
+
+    expect(getAllSpy).toHaveBeenCalledTimes(1);
+    expect(data.value).toEqual(['list1', 'list2']);
+    expect(isLoading.value).toEqual(false);
+    expect(isFetching.value).toEqual(false);
+    expect(error.value).toEqual(undefined);
+  });
+
+  it('should rerun the query when refresh is used', async () => {
+    vi.spyOn(PowerSync, 'usePowerSync').mockReturnValue(ref(mockPowerSync) as any);
+    const getAllSpy = mockPowerSync.getAll;
+
+    const [{ isLoading, isFetching, refresh }] = withSetup(() =>
+      useQuery('SELECT * from lists', [], { runQueryOnce: true })
+    );
+    expect(isFetching.value).toEqual(true);
+    expect(isLoading.value).toEqual(true);
+
+    await flushPromises();
+    expect(isFetching.value).toEqual(false);
+    expect(isLoading.value).toEqual(false);
+
+    expect(getAllSpy).toHaveBeenCalledTimes(1);
+
+    const refreshPromise = refresh?.();
+    expect(isFetching.value).toEqual(true);
+    expect(isLoading.value).toEqual(false); // only used for initial loading
+
+    await refreshPromise;
+    expect(isFetching.value).toEqual(false);
+
+    expect(getAllSpy).toHaveBeenCalledTimes(2);
+  });
+
+  it('should set error when error occurs and runQueryOnce flag is set', async () => {
+    const mockPowerSyncError = {
+      ...mockPowerSync,
+      getAll: vi.fn(() => {
+        throw new Error('some error');
+      })
+    };
+    vi.spyOn(PowerSync, 'usePowerSync').mockReturnValue(ref(mockPowerSyncError) as any);
+
+    const [{ error }] = withSetup(() => useQuery('SELECT * from lists', [], { runQueryOnce: true }));
+    await flushPromises();
+
+    expect(error.value).toEqual(Error('PowerSync failed to fetch data: some error'));
+  });
+
+  it('should set error when error occurs', async () => {
+    const mockPowerSyncError = {
+      ...mockPowerSync,
+      getAll: vi.fn(() => {
+        throw new Error('some error');
+      })
+    };
+    vi.spyOn(PowerSync, 'usePowerSync').mockReturnValue(ref(mockPowerSyncError) as any);
+
+    const [{ error }] = withSetup(() => useQuery('SELECT * from lists', []));
+    await flushPromises();
+
+    expect(error.value).toEqual(Error('PowerSync failed to fetch data: some error'));
+  });
+
+  it('should accept compilable queries', async () => {
+    vi.spyOn(PowerSync, 'usePowerSync').mockReturnValue(ref(mockPowerSync) as any);
+
+    const [{ isLoading }] = withSetup(() =>
+      useQuery({ execute: () => [] as any, compile: () => ({ sql: 'SELECT * from lists', parameters: [] }) })
+    );
+
+    expect(isLoading.value).toEqual(true);
+    await flushPromises();
+    expect(isLoading.value).toEqual(false);
+  });
+
+  it('should set error for compilable query on useQuery parameters', async () => {
+    vi.spyOn(PowerSync, 'usePowerSync').mockReturnValue(ref(mockPowerSync) as any);
+
+    const [{ isLoading, error }] = withSetup(() =>
+      useQuery({ execute: () => [] as any, compile: () => ({ sql: 'SELECT * from lists', parameters: [] }) }, ['x'])
+    );
+
+    expect(error.value).toEqual(
+      Error('PowerSync failed to fetch data: You cannot pass parameters to a compiled query.')
+    );
+  });
+});
diff --git a/packages/vue/tests/useStatus.test.ts b/packages/vue/tests/useStatus.test.ts
new file mode 100644
index 000000000..8a0912da6
--- /dev/null
+++ b/packages/vue/tests/useStatus.test.ts
@@ -0,0 +1,36 @@
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { useStatus } from '../src/composables/useStatus';
+import { withSetup } from './utils';
+import * as PowerSync from '../src/composables/powerSync';
+import { ref } from 'vue';
+
+const cleanupListener = vi.fn();
+
+const mockPowerSync = {
+  currentStatus: { connected: true },
+  registerListener: () => cleanupListener
+};
+
+describe('useStatus', () => {
+  afterEach(() => {
+    vi.resetAllMocks();
+  });
+
+  it('should load the status of PowerSync', async () => {
+    vi.spyOn(PowerSync, 'usePowerSync').mockReturnValue(ref(mockPowerSync) as any);
+
+    const [status] = withSetup(() => useStatus());
+    expect(status.value.connected).toBe(true);
+  });
+
+  it('should run the listener cleanup on unmount', () => {
+    vi.spyOn(PowerSync, 'usePowerSync').mockReturnValue(ref(mockPowerSync as any));
+
+    const [, app] = withSetup(() => useStatus());
+    const listenerUnsubscribe = cleanupListener;
+
+    app.unmount();
+
+    expect(listenerUnsubscribe).toHaveBeenCalled();
+  });
+});
diff --git a/packages/vue/tests/utils.ts b/packages/vue/tests/utils.ts
new file mode 100644
index 000000000..5e3c20bf2
--- /dev/null
+++ b/packages/vue/tests/utils.ts
@@ -0,0 +1,14 @@
+import type { App } from 'vue';
+import { createApp } from 'vue';
+
+export function withSetup<T>(composable: () => T): [T, App] {
+  let result: T;
+  const app = createApp({
+    setup() {
+      result = composable();
+      return () => {};
+    }
+  });
+  app.mount(document.createElement('div'));
+  return [result!, app];
+}
diff --git a/packages/vue/tsconfig.json b/packages/vue/tsconfig.json
index 68af76b29..714b7302e 100644
--- a/packages/vue/tsconfig.json
+++ b/packages/vue/tsconfig.json
@@ -6,7 +6,7 @@
     "rootDir": "src",
     "composite": true,
     "outDir": "./lib",
-    "lib": ["esnext", "DOM"],
+    "lib": ["es2022", "DOM"],
     "module": "esnext",
     "sourceMap": true,
     "moduleResolution": "node",
@@ -22,5 +22,6 @@
     {
       "path": "../common"
     }
-  ]
+  ],
+  "include": ["src/**/*"]
 }
diff --git a/packages/vue/vitest.config.ts b/packages/vue/vitest.config.ts
new file mode 100644
index 000000000..f96ac5630
--- /dev/null
+++ b/packages/vue/vitest.config.ts
@@ -0,0 +1,9 @@
+import { defineConfig, UserConfigExport } from 'vitest/config';
+
+const config: UserConfigExport = {
+  test: {
+    environment: 'jsdom'
+  }
+};
+
+export default defineConfig(config);
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9b6798d1a..a4e4e4f87 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1156,7 +1156,7 @@ importers:
         version: 5.4.5
       vitest:
         specifier: ^1.5.2
-        version: 1.5.2(@types/node@20.12.5)
+        version: 1.5.3(@types/node@20.12.5)
 
   packages/kysely-driver:
     dependencies:
@@ -1281,9 +1281,18 @@ importers:
         specifier: workspace:*
         version: link:../common
     devDependencies:
+      flush-promises:
+        specifier: ^1.0.2
+        version: 1.0.2
+      jsdom:
+        specifier: ^24.0.0
+        version: 24.0.0
       typescript:
         specifier: ^5.1.3
         version: 5.4.4
+      vitest:
+        specifier: ^1.5.1
+        version: 1.5.1(jsdom@24.0.0)
       vue:
         specifier: 3.4.21
         version: 3.4.21(typescript@5.4.4)
@@ -17512,11 +17521,19 @@ packages:
       chai: 4.4.1
     dev: true
 
-  /@vitest/expect@1.5.2:
-    resolution: {integrity: sha512-rf7MTD1WCoDlN3FfYJ9Llfp0PbdtOMZ3FIF0AVkDnKbp3oiMW1c8AmvRZBcqbAhDUAvF52e9zx4WQM1r3oraVA==}
+  /@vitest/expect@1.5.1:
+    resolution: {integrity: sha512-w3Bn+VUMqku+oWmxvPhTE86uMTbfmBl35aGaIPlwVW7Q89ZREC/icfo2HBsEZ3AAW6YR9lObfZKPEzstw9tJOQ==}
     dependencies:
-      '@vitest/spy': 1.5.2
-      '@vitest/utils': 1.5.2
+      '@vitest/spy': 1.5.1
+      '@vitest/utils': 1.5.1
+      chai: 4.4.1
+    dev: true
+
+  /@vitest/expect@1.5.3:
+    resolution: {integrity: sha512-y+waPz31pOFr3rD7vWTbwiLe5+MgsMm40jTZbQE8p8/qXyBX3CQsIXRx9XK12IbY7q/t5a5aM/ckt33b4PxK2g==}
+    dependencies:
+      '@vitest/spy': 1.5.3
+      '@vitest/utils': 1.5.3
       chai: 4.4.1
     dev: true
 
@@ -17528,10 +17545,18 @@ packages:
       pathe: 1.1.2
     dev: true
 
-  /@vitest/runner@1.5.2:
-    resolution: {integrity: sha512-7IJ7sJhMZrqx7HIEpv3WrMYcq8ZNz9L6alo81Y6f8hV5mIE6yVZsFoivLZmr0D777klm1ReqonE9LyChdcmw6g==}
+  /@vitest/runner@1.5.1:
+    resolution: {integrity: sha512-mt372zsz0vFR7L1xF/ert4t+teD66oSuXoTyaZbl0eJgilvyzCKP1tJ21gVa8cDklkBOM3DLnkE1ljj/BskyEw==}
     dependencies:
-      '@vitest/utils': 1.5.2
+      '@vitest/utils': 1.5.1
+      p-limit: 5.0.0
+      pathe: 1.1.2
+    dev: true
+
+  /@vitest/runner@1.5.3:
+    resolution: {integrity: sha512-7PlfuReN8692IKQIdCxwir1AOaP5THfNkp0Uc4BKr2na+9lALNit7ub9l3/R7MP8aV61+mHKRGiqEKRIwu6iiQ==}
+    dependencies:
+      '@vitest/utils': 1.5.3
       p-limit: 5.0.0
       pathe: 1.1.2
     dev: true
@@ -17544,8 +17569,16 @@ packages:
       pretty-format: 29.7.0
     dev: true
 
-  /@vitest/snapshot@1.5.2:
-    resolution: {integrity: sha512-CTEp/lTYos8fuCc9+Z55Ga5NVPKUgExritjF5VY7heRFUfheoAqBneUlvXSUJHUZPjnPmyZA96yLRJDP1QATFQ==}
+  /@vitest/snapshot@1.5.1:
+    resolution: {integrity: sha512-h/1SGaZYXmjn6hULRBOlqam2z4oTlEe6WwARRzLErAPBqljAs6eX7tfdyN0K+MpipIwSZ5sZsubDWkCPAiVXZQ==}
+    dependencies:
+      magic-string: 0.30.9
+      pathe: 1.1.2
+      pretty-format: 29.7.0
+    dev: true
+
+  /@vitest/snapshot@1.5.3:
+    resolution: {integrity: sha512-K3mvIsjyKYBhNIDujMD2gfQEzddLe51nNOAf45yKRt/QFJcUIeTQd2trRvv6M6oCBHNVnZwFWbQ4yj96ibiDsA==}
     dependencies:
       magic-string: 0.30.9
       pathe: 1.1.2
@@ -17558,8 +17591,14 @@ packages:
       tinyspy: 2.2.1
     dev: true
 
-  /@vitest/spy@1.5.2:
-    resolution: {integrity: sha512-xCcPvI8JpCtgikT9nLpHPL1/81AYqZy1GCy4+MCHBE7xi8jgsYkULpW5hrx5PGLgOQjUpb6fd15lqcriJ40tfQ==}
+  /@vitest/spy@1.5.1:
+    resolution: {integrity: sha512-vsqczk6uPJjmPLy6AEtqfbFqgLYcGBe9BTY+XL8L6y8vrGOhyE23CJN9P/hPimKXnScbqiZ/r/UtUSOQ2jIDGg==}
+    dependencies:
+      tinyspy: 2.2.1
+    dev: true
+
+  /@vitest/spy@1.5.3:
+    resolution: {integrity: sha512-Llj7Jgs6lbnL55WoshJUUacdJfjU2honvGcAJBxhra5TPEzTJH8ZuhI3p/JwqqfnTr4PmP7nDmOXP53MS7GJlg==}
     dependencies:
       tinyspy: 2.2.1
     dev: true
@@ -17573,8 +17612,17 @@ packages:
       pretty-format: 29.7.0
     dev: true
 
-  /@vitest/utils@1.5.2:
-    resolution: {integrity: sha512-sWOmyofuXLJ85VvXNsroZur7mOJGiQeM0JN3/0D1uU8U9bGFM69X1iqHaRXl6R8BwaLY6yPCogP257zxTzkUdA==}
+  /@vitest/utils@1.5.1:
+    resolution: {integrity: sha512-92pE17bBXUxA0Y7goPcvnATMCuq4NQLOmqsG0e2BtzRi7KLwZB5jpiELi/8ybY8IQNWemKjSD5rMoO7xTdv8ug==}
+    dependencies:
+      diff-sequences: 29.6.3
+      estree-walker: 3.0.3
+      loupe: 2.3.7
+      pretty-format: 29.7.0
+    dev: true
+
+  /@vitest/utils@1.5.3:
+    resolution: {integrity: sha512-rE9DTN1BRhzkzqNQO+kw8ZgfeEBCLXiHJwetk668shmNBpSagQxneT5eSqEBLP+cqSiAeecvQmbpFfdMyLcIQA==}
     dependencies:
       diff-sequences: 29.6.3
       estree-walker: 3.0.3
@@ -23551,6 +23599,10 @@ packages:
     resolution: {integrity: sha512-HVzoK3r6Vsg+lKvlIZzaWNBVai+FXTX1wdYhz/wVlH13tb/gOdLXmlTqy6odmTBhT5UoWUbq0k8263Qhr9d88w==}
     engines: {node: '>=0.4.0'}
 
+  /flush-promises@1.0.2:
+    resolution: {integrity: sha512-G0sYfLQERwKz4+4iOZYQEZVpOt9zQrlItIxQAAYAWpfby3gbHrx0osCHz5RLl/XoXevXk0xoN4hDFky/VV9TrA==}
+    dev: true
+
   /follow-redirects@1.15.5:
     resolution: {integrity: sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw==}
     engines: {node: '>=4.0'}
@@ -35364,8 +35416,29 @@ packages:
       - terser
     dev: true
 
-  /vite-node@1.5.2(@types/node@20.12.5):
-    resolution: {integrity: sha512-Y8p91kz9zU+bWtF7HGt6DVw2JbhyuB2RlZix3FPYAYmUyZ3n7iTp8eSyLyY6sxtPegvxQtmlTMhfPhUfCUF93A==}
+  /vite-node@1.5.1:
+    resolution: {integrity: sha512-HNpfV7BrAsjkYVNWIcPleJwvJmydJqqJRrRbpoQ/U7QDwJKyEzNa4g5aYg8MjXJyKsk29IUCcMLFRcsEvqUIsA==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+    hasBin: true
+    dependencies:
+      cac: 6.7.14
+      debug: 4.3.4(supports-color@8.1.1)
+      pathe: 1.1.2
+      picocolors: 1.0.0
+      vite: 5.2.8(@types/node@20.11.17)
+    transitivePeerDependencies:
+      - '@types/node'
+      - less
+      - lightningcss
+      - sass
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+    dev: true
+
+  /vite-node@1.5.3(@types/node@20.12.5):
+    resolution: {integrity: sha512-axFo00qiCpU/JLd8N1gu9iEYL3xTbMbMrbe5nDp9GL0nb6gurIdZLkkFogZXWnE8Oyy5kfSLwNVIcVsnhE7lgQ==}
     engines: {node: ^18.0.0 || >=20.0.0}
     hasBin: true
     dependencies:
@@ -35938,15 +36011,71 @@ packages:
       - terser
     dev: true
 
-  /vitest@1.5.2(@types/node@20.12.5):
-    resolution: {integrity: sha512-l9gwIkq16ug3xY7BxHwcBQovLZG75zZL0PlsiYQbf76Rz6QGs54416UWMtC0jXeihvHvcHrf2ROEjkQRVpoZYw==}
+  /vitest@1.5.1(jsdom@24.0.0):
+    resolution: {integrity: sha512-3GvBMpoRnUNbZRX1L3mJCv3Ou3NAobb4dM48y8k9ZGwDofePpclTOyO+lqJFKSQpubH1V8tEcAEw/Y3mJKGJQQ==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+    hasBin: true
+    peerDependencies:
+      '@edge-runtime/vm': '*'
+      '@types/node': ^18.0.0 || >=20.0.0
+      '@vitest/browser': 1.5.1
+      '@vitest/ui': 1.5.1
+      happy-dom: '*'
+      jsdom: '*'
+    peerDependenciesMeta:
+      '@edge-runtime/vm':
+        optional: true
+      '@types/node':
+        optional: true
+      '@vitest/browser':
+        optional: true
+      '@vitest/ui':
+        optional: true
+      happy-dom:
+        optional: true
+      jsdom:
+        optional: true
+    dependencies:
+      '@vitest/expect': 1.5.1
+      '@vitest/runner': 1.5.1
+      '@vitest/snapshot': 1.5.1
+      '@vitest/spy': 1.5.1
+      '@vitest/utils': 1.5.1
+      acorn-walk: 8.3.2
+      chai: 4.4.1
+      debug: 4.3.4(supports-color@8.1.1)
+      execa: 8.0.1
+      jsdom: 24.0.0
+      local-pkg: 0.5.0
+      magic-string: 0.30.9
+      pathe: 1.1.2
+      picocolors: 1.0.0
+      std-env: 3.7.0
+      strip-literal: 2.0.0
+      tinybench: 2.6.0
+      tinypool: 0.8.4
+      vite: 5.2.8(@types/node@20.11.17)
+      vite-node: 1.5.1
+      why-is-node-running: 2.2.2
+    transitivePeerDependencies:
+      - less
+      - lightningcss
+      - sass
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+    dev: true
+
+  /vitest@1.5.3(@types/node@20.12.5):
+    resolution: {integrity: sha512-2oM7nLXylw3mQlW6GXnRriw+7YvZFk/YNV8AxIC3Z3MfFbuziLGWP9GPxxu/7nRlXhqyxBikpamr+lEEj1sUEw==}
     engines: {node: ^18.0.0 || >=20.0.0}
     hasBin: true
     peerDependencies:
       '@edge-runtime/vm': '*'
       '@types/node': ^18.0.0 || >=20.0.0
-      '@vitest/browser': 1.5.2
-      '@vitest/ui': 1.5.2
+      '@vitest/browser': 1.5.3
+      '@vitest/ui': 1.5.3
       happy-dom: '*'
       jsdom: '*'
     peerDependenciesMeta:
@@ -35964,11 +36093,11 @@ packages:
         optional: true
     dependencies:
       '@types/node': 20.12.5
-      '@vitest/expect': 1.5.2
-      '@vitest/runner': 1.5.2
-      '@vitest/snapshot': 1.5.2
-      '@vitest/spy': 1.5.2
-      '@vitest/utils': 1.5.2
+      '@vitest/expect': 1.5.3
+      '@vitest/runner': 1.5.3
+      '@vitest/snapshot': 1.5.3
+      '@vitest/spy': 1.5.3
+      '@vitest/utils': 1.5.3
       acorn-walk: 8.3.2
       chai: 4.4.1
       debug: 4.3.4(supports-color@8.1.1)
@@ -35982,7 +36111,7 @@ packages:
       tinybench: 2.6.0
       tinypool: 0.8.4
       vite: 5.2.8(@types/node@20.12.5)
-      vite-node: 1.5.2(@types/node@20.12.5)
+      vite-node: 1.5.3(@types/node@20.12.5)
       why-is-node-running: 2.2.2
     transitivePeerDependencies:
       - less