Page appearing empty when navigating (but not directly)

import type { SanityDocument } from "@sanity/client";
const router = useRouter();

const JOBS_QUERY = groq`*[
  _type == "job"
  && defined(slug.current)
]|order(title, description)[0...12]{_id, title, description, department, open, slug}`;

const { data: jobs } = await useSanityQuery<SanityDocument[]>(JOBS_QUERY);

const results = ref<SanityDocument[] | null>(jobs.value ?? null);
const search = ref(decodeURIComponent(useRoute().query.search as string || ''));

watch(search, () => {
    if (search.value) {
        router.push({ query: { search: search.value } });
    } else {
        router.push({ query: {} });
    }
});

const handleSearch = () => {
    results.value = jobs.value?.filter((job) =>
        Object.values(job).some((value) => value.toString().toLowerCase().includes(search.value.toLowerCase()))
    ) || [];
};