I'm using a wasm with glue js file which works fine when using the button once wasm is loaded. I wanted to make it reactive to one of the variables. The specific function is of the form density = function (temperature, pressure) where pressure is a fixed array [10,20..1200] and temperature is bound to slider. How do I make the function available to be reactive so that as the temperature is changed, the density is reactively updated? I tried onMount but clearly, I don't know how to use it as I couldn't get it to work. Also, not sure if that is the right approach.

The code is as below:

<script>
  import DensityPlot from './DensityPlot.svelte'
    let pressure = 1200, temper=20, rho =[], dens, press1;
    const range = (start, stop, step = 1) =>
  Array(Math.ceil((stop - start) / step)).fill(start).map((x, y) => x + y * step)

  pressure = range(10,2000,1)
  $:temper = temper // make temperature reactive

  function density(temp, press){
    rho = press.map(d=>{return Module.PropsSI('D', 'T', (temp+273.15), 'P', d*6894.76,'Xenon' )})
  }
$:rho = rho //trying to make it reactive but as currently coded doesn't work

// Data passed to plotting component (plotly) DensityPlot.svelte

    $: data = [{
        x: pressure,
        y: rho,
        mode: "lines+markers",
        name: temper,
        type: "scatter",
      }]

</script>

<label>
    <input type=range bind:value={temper} min={0} max={50}>
  <p>Temperature is {temper} deg C</p>
  <p>Wait a few seconds for wasm to load </p>
</label>

<button on:click={density(temper,pressure)}>
    <p>Click for density </p>
</button>

<div>
  <h2>Density Plot</h2>
  {#if data.length > 0}
    <DensityPlot {data} />
  {/if}
</div>

Any help is appreciated.