1 files changed, 17 insertions, 3 deletions
diff --git a/app/assets/javascripts/vue_shared/components/url_sync.vue b/app/assets/javascripts/vue_shared/components/url_sync.vue
index 2844d9e9e94..925c6008836 100644
--- a/app/assets/javascripts/vue_shared/components/url_sync.vue
+++ b/app/assets/javascripts/vue_shared/components/url_sync.vue
@@ -2,11 +2,18 @@
 import { historyPushState } from '~/lib/utils/common_utils';
 import { mergeUrlParams } from '~/lib/utils/url_utility';
 
+/**
+ * Renderless component to update the query string,
+ * the update is done by updating the query property or
+ * by using updateQuery method in the scoped slot.
+ * note: do not use both prop and updateQuery method.
+ */
 export default {
   props: {
     query: {
       type: Object,
-      required: true,
+      required: false,
+      default: null,
     },
   },
   watch: {
@@ -14,12 +21,19 @@ export default {
       immediate: true,
       deep: true,
       handler(newQuery) {
-        historyPushState(mergeUrlParams(newQuery, window.location.href, { spreadArrays: true }));
+        if (newQuery) {
+          this.updateQuery(newQuery);
+        }
       },
     },
   },
+  methods: {
+    updateQuery(newQuery) {
+      historyPushState(mergeUrlParams(newQuery, window.location.href, { spreadArrays: true }));
+    },
+  },
   render() {
-    return this.$slots.default;
+    return this.$scopedSlots.default?.({ updateQuery: this.updateQuery });
   },
 };
 </script>