array.find() with sveltekit reactivity functioning sporadically

An app showing a list of building systems components with the ability to add a component. Database is Mongodb.

+page.js fetches the list, a defintition of the table + populates “lookup” lists (to display text instead of _id on the list), returning all these things in data

page.svelte uses svelte component <GenericListPage> passing in data.rows.components thus:

<div class="mt-2">
  Components
    <GenericListView
      definition="{data.subAssetDefinition}"
      data="{data.rows.components}"
      table="true"
      on:invalidate="{myInvalidate}"
    />
</div>

<GenericListView> builds a <table>, including a <TableRowTd> component:

{#each data as row}
  <tr on:click="{rowClick (row)}">
    {#each definition.tableFields as field}
      <TableRowTd
        {definition}
        {field}
        data="{row[field] || ''}"
      />
    {/each}
  </tr>
{/each}

Component <TableRowTd> has a $: function that takes the value in data (which is an _id) and searches through the appropriate list to match against the _id in the list and get the text.

$: {
  displayValue = data;
  let fieldDef = definition.schema.find (el => el.name == field);

  if (fieldDef && fieldDef.listType) {
    console.log (`<TableRowTd> looking up list for ${field} ${data} ${fieldDef.table}`)
    try {
      console.log (definition.lists)
      let list = definition.lists.find ((el) => el.table === fieldDef.table);

      if (list) {
        console.log (`found the list`)
        let row = list.data.find (el => el._id === data);
        if (row) {
          console.log (`found`)
          displayValue = row.value;
        }
      }
    } catch (err) {
      console.log('error on %s: %s', fieldDef.table, err.toString())
    }
  }
}

All functions as desired on initial page load:

On adding an entry, the invalidate event is raised and passed up the stack – page.js' load function is called again.

However, now, in the $: function in <TableRowTd>, the let list = definition.lists.find ((el) => el.table === fieldDef.table); call now returns undefined, i.e. it does not find the item in the list, despite the item being present in the list:

Structure of the list:

Console log where we see the “match” failing:

Any thoughts on what’s going on here? Maybe I’m “overloading” array.find() somehow? Maybe there’s smart way to move this searching “up” to the <Generic ListPage> component?