fix: bug where defaultValue would overwrite and therefore break the updating in URL when compared if value not equals defaultValue

Author: holux-design

playground/app.vue

@@ -1,14 +1,26 @@
 <template>
   <div class="bg-black text-white w-screen h-screen p-4">
-    <input
-      v-model="name"
-      type="text"
-      placeholder="Type name"
-      class="bg-transparent border border-white px-4 py-2 rounded-md"
-    >
+    <pre>{{ name }}</pre>
+
+    <br>
+    <br>
+    <button @click="change()">
+      Change
+    </button>
+    <br>
+    <button @click="reset()">
+      Reset
+    </button>
   </div>
 </template>
 
 <script setup lang="ts">
-const name = queryRef('name', '')
+const name = queryRef('name', ['Lukas', 'Ipsum'])
+
+const change = () => {
+  name.value[0] = 'Max'
+}
+const reset = () => {
+  name.value = ['Lukas', 'Ipsum']
+}
 </script>

src/runtime/composables/queryRef.ts

@@ -5,6 +5,7 @@ type QueryParamType = 'string' | 'string[]' | 'number' | 'number[]' | 'boolean'
 
 export const queryRef = <T>(key: string, defaultValue: T | null = null) => {
   const type = getType(defaultValue)
+  const fixedDefaultValue = JSON.parse(JSON.stringify(defaultValue))
 
   const loadedValue = loadQueryParamFromURL(key, type)
 
@@ -13,7 +14,7 @@ export const queryRef = <T>(key: string, defaultValue: T | null = null) => {
   watch(
     queryRef,
     async (newVal) => {
-      updateQueryParamInURL(key, newVal, defaultValue, type)
+      updateQueryParamInURL(key, newVal, fixedDefaultValue, type)
     },
     { deep: true },
   )
@@ -24,8 +25,8 @@ export const queryRef = <T>(key: string, defaultValue: T | null = null) => {
 function updateQueryParamInURL(key, value, defaultValue, type: QueryParamType) {
   if (typeof window == 'undefined') return
 
-  if (['string[]', 'number[]', 'boolean[]'].includes(type)) value = value.join(',')
-  if (['object', 'object[]'].includes(type)) value = JSON.stringify(value)
+  value = valueToString(value, type)
+  defaultValue = valueToString(defaultValue, type)
 
   const url = new URL(window.location.href)
   if (value != defaultValue) {
@@ -57,3 +58,10 @@ function getType(defaultValue: any): QueryParamType {
 
   return _type
 }
+
+function valueToString(value, type): string {
+  if (['string[]', 'number[]', 'boolean[]'].includes(type)) value = value.join(',')
+  if (['object', 'object[]'].includes(type)) value = JSON.stringify(value)
+
+  return value
+}