Having a hard time understanding reactivity in a Svelte array for SuperForms

I have the following form in SuperForms:

  const { form } = superForm<CreateJobSchema>(data, {    validators: typeboxClient(CREATE_JOB_SCHEMA),    onError: (error) => {      console.error(error)      toast.error("Failed to create job. Please try again later.")      isGenerating = false    }  })

With the following schema:

const ScorecardSchema = Type.Object({  description: Type.String(),  weight: Type.Number()})export const CREATE_JOB_SCHEMA = Type.Object({  title: Type.String(),  description: Type.String(),  tenantId: Type.String(),  scorecard: Type.Array(ScorecardSchema)})

When I use the following:

<Button    variant="outline"    type="button"    onclick={() => {      $form.scorecard.push({        description: "",        weight: 0      })    }}>Add Criteria</Button>  {#each $form.scorecard as scorecard}<div class="flex flex-col gap-2"><div class="flex items-center gap-2"><span>Description</span><Input type="text" bind:value={scorecard.description} /></div></div>  {/each}

When I click on "Add Criteria", scorecard is not reactive until title and description change. Once title and description change, the entire UI updates.

And indeed, I get the following error:

CreateJob.svelte?t=1739748167963:177 [svelte] binding_property_non_reactive`bind:value={scorecard.description}` (src/routes/(authenticated)/jobs/create/CreateJob.svelte:66:31) is binding to a non-reactive propertyhttps://svelte.dev/e/binding_property_non_reactive(anonymous)    @    CreateJob.svelte?t=1739748167963:177

Can someone explain why this is?