title: How can I export a function from a Svelte component that changes a value in the component?
body: <p>I have a component called <code>WastedTime.svelte</code> with a value <code>wastedTime</code>. There's also a function to change the value to <code>50</code> (in my real code, this does an animation but this is a reduced test case for Stack Overflow).</p>
  
  <p>To allow the child function to be called from a parent, I have used <code>&lt;script context="module"&gt;</code> per the Svelte docs:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;script context="module"&gt;
      var wastedTime = 0;
      export function changeNumber(){
          console.log('changing number')
          wastedTime = 50
      }
  &lt;/script&gt;
  
  &lt;script&gt;
      // Putting 'var wastedTime = 0' here doesn't work either
  &lt;/script&gt;
  
  
  &lt;h1&gt;Wasted time: {wastedTime}&lt;/h1&gt;
  </code></pre>
  
  <p>The parent calls the function in the child from <code>onMount</code>:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;script&gt;
  
      import { onMount } from 'svelte';
      import WastedTime, {changeNumber } from './WastedTime.svelte';
  
      onMount(() =&gt; {
          changeNumber()
      });
  &lt;/script&gt;
  
  &lt;WastedTime /&gt;
  </code></pre>
  
  <p>The problem is that since <code>wastedTime</code> is referred to in <code>&lt;script context="module"&gt;</code>, it can't seem to change <code>wastedTime</code>. The exported function runs, but <code>wastedTime</code> stays at 0.</p>
  
  <p><a href="https://svelte.dev/repl/0585b946b9684765b4f840c47957ecef" rel="noreferrer">Copy of this on Svelte REPL</a></p>
  
  <p>I have tried:
   - Putting <code>var wastedTime = 0</code> in <code>&lt;script context="module"&gt;</code>
   - Putting <code>var wastedTime = 0</code> in <code>&lt;script&gt;</code></p>
  
  <p>Neither works.</p>
  
  <p><strong>How can I export a function from a Svelte component that changes a value  in the component?</strong></p>