Is it possible to simple pass in props to the query key?

<script lang="ts" setup>
import { clientClient } from "@/clients/clientClient";
import { useQuery } from "@tanstack/vue-query";
import { useAutocomplete } from "@/composables/useAutocomplete";
import { Client } from "@/entities/client";
import { computed } from "vue";

const props = defineProps<{ client: Client | null }>();

const { search, queryOptions } = useAutocomplete({ searchKey: "name" });

const clientId = computed(() => props.client?.id);

const { data } = useQuery({
  queryKey: ["sites", "list", { client: props.client }, queryOptions],
  queryFn: () =>
    clientClient.getSitesForClient(
      clientId.value as string,
      queryOptions.value
    ),
  keepPreviousData: true,
  enabled: !!clientId.value,
  initialData: { data: [] },
});
</script>

<script lang="ts" setup>
import { clientClient } from "@/clients/clientClient";
import { useQuery } from "@tanstack/vue-query";
import { useAutocomplete } from "@/composables/useAutocomplete";
import { Client } from "@/entities/client";
import { computed } from "vue";

const props = defineProps<{ client: Client | null }>();

const { search, queryOptions } = useAutocomplete({ searchKey: "name" });

const clientId = computed(() => props.client?.id);

const { data } = useQuery({
  queryKey: ["sites", "list", { client: props.client }, queryOptions],
  queryFn: () =>
    clientClient.getSitesForClient(
      clientId.value as string,
      queryOptions.value
    ),
  keepPreviousData: true,
  enabled: !!clientId.value,
  initialData: { data: [] },
});
</script>