Reactive Route Search Query Composable

export const useRouteSearchQuery = ({
  name = "q",
  defaultValue = "",
  replace = false,
}: { name?: string; defaultValue?: string; replace?: boolean } = {}) => {
  const requestUrl = useRequestURL();
  const route = useRoute();

  const searchQuery = computed({
    get: () => {
      console.log("-> getter", {
        routeVal: route.query[name],
        staticVal: requestUrl.searchParams.get(name),
      });

      // Reactive, but doesnt work in ssr
      const routeVal = route.query[name];
      if (routeVal) return String(routeVal);

      // Non reactive, works in ssr
      const staticVal = requestUrl.searchParams.get(name);
      if (staticVal) return String(staticVal);

      return defaultValue;
    },
    set: (newVal: string | undefined) => {
      const query = { ...route.query };
      if (newVal?.length) {
        query[name] = newVal;
      } else {
        delete query[name];
      }

      navigateTo({ query }, { replace });
    },
  });

  return { searchQuery };
};