Re-render destroys entire table? (losing scroll)

[9mm]

I am having a hellish time simply trying to update a single row of data using useVueTable

From all the issues i've read, there's no way to do this unless I update the data.value reference... ok, sure.

However, when I do this, ALL other state in the table is lost, for instance:

1. expanded state
2. worse still, the entire table seems to disappear entirely and get re-created, which loses the user's scroll position, as well as a large white flash where the table disappears and re-appears

How do I literally just refresh the data so that ONLY the data changes, and nothing else changes?

  setup(props) {
    const { columns, data } = toRefs(props);
    const expanded = shallowRef({});

    const onExpandedChange = updateOrValue => {
      if (typeof updateOrValue === "function") {
        expanded.value = updateOrValue(expanded.value);
      } else {
        expanded.value = updateOrValue;
      }
    };

    const table = useVueTable({
      get data() {
        return data.value;
      },
      state: {
        get expanded() {
          return expanded.value;
        }
      },
      columns: columns.value,
      onExpandedChange,
      getSubRows: row => row.sub_rows,
      getCoreRowModel: getCoreRowModel(),
      getExpandedRowModel: getExpandedRowModel(),
      debugTable: false,
    });

    return {
      table,
    };
  },

[9mm]

I had another variable changing the state...