Spreading into a reactive object?

Question

I'm using Carbon Charts for data visualisation. The following are my options for an Area Chart which has a second Y axis as the two groups of values I'm trying to visualise correlate with each other.

I'm also trying to place a threshold on one of the axes, depending on the data received from the backend. But once the data changes to another set of data (e.g. navigating to another page that uses the same chart and base options but different data) the old threshold persist but it shouldn't and now I'm seeing two thresholds (one for each Y axis). I assume I have a problem with reactivity but I can't see why. Below is a reproducer.

<script lang="ts">
import '@carbon/charts-svelte/styles.css';
import { ScaleTypes, type AreaChart, type AreaChartOptions } from '@carbon/charts-svelte';
import { type ComboChartAxisOptions } from '@carbon/charts';
import { onMount, type ComponentType } from 'svelte';

let data = [
  {
    group: 'Dataset 1',
    date: new Date(2019, 0, 1),
    value1: 0
  },
  {
    group: 'Dataset 1',
    date: new Date(2019, 0, 6),
    value1: -37312
  },
  {
    group: 'Dataset 1',
    date: new Date(2019, 0, 8),
    value1: -22392
  },
  {
    group: 'Dataset 1',
    date: new Date(2019, 0, 15),
    value1: -52576
  },
  {
    group: 'Dataset 1',
    date: new Date(2019, 0, 19),
    value1: 20135
  },
  {
    group: 'Dataset 2',
    date: new Date(2019, 0, 1),
    value2: 47263
  },
  {
    group: 'Dataset 2',
    date: new Date(2019, 0, 5),
    value2: 14178
  },
  {
    group: 'Dataset 2',
    date: new Date(2019, 0, 8),
    value2: 23094
  },
  {
    group: 'Dataset 2',
    date: new Date(2019, 0, 13),
    value2: 45281
  },
  {
    group: 'Dataset 2',
    date: new Date(2019, 0, 19),
    value2: -63954
  }
]

let alert = {
  for: "value1",
  value: 15000
}

$: options = {
        title: "What am I doing wrong?",
        axes: {
            bottom: {
                mapsTo: 'date',
                scaleType: ScaleTypes.TIME
            },
            left: {
                title: 'Value 1',
                mapsTo: 'value1',
                 ...(alert.for == 'value1' && {
                    thresholds: [
                        {
                            value: alert.value,
                            label: 'Alert 1',
                            fillColor: 'red'
                        }
                    ]
                })
            },
            right: {
                title: 'Value 2',
                mapsTo: 'value2',
                correspondingDatasets: ['Dataset 2'],
                 ...(alert.for == 'value2' && {
                    thresholds: [
                        {
                            value: alert.value,
                            label: 'Alert 2',
                            fillColor: 'green'
                        }
                    ]
                })
            } as ComboChartAxisOptions
        },
        curve: 'curveNatural',
        height: '400px'
    } as AreaChartOptions;

let chart: ComponentType<AreaChart>;

onMount(async () => {
  chart = (await import('@carbon/charts-svelte')).AreaChart;
});
</script>

<svelte:component this={chart} {options} {data} style="padding:2rem;" />

<button style="padding:1rem;" on:click={() => {
  alert.for = "value2"
  alert.value = -10000
}}>Click me to change the alert!</button>