I am trying to edit the contents of a component containing a text area, inside of a dynamic route. However this code does not update unless I refresh the page even if the variable is set reactively.

Here is how I define my variable

$: {
    variables = $config.stager.modules?.[$page.params.module];
}

When I display it on the page, it reactively updates like expected with no issues. However

<TextInput
    style="w-full"
    ,
    data={{
        label: variable[0],
        required: variable[1].required ? '*' : '',
        placeholder: variable[1].placeholder,
        value: variables?.[variable[0]],
        save_value: (value) => {
            setSubkey(config, `stager.modules.${$page.params.module}.${variable[0]}`, value);
        }
    }}
/>

When I try and set the “value” key, it doesn’t update, and only updates if I refresh. What am I doing wrong?

I did see an answer on binding, but my component is rendered in an each loop:

{#each Object.entries(module_info.data.variables) as variable}

So Im not too sure how to go about doing it