title: Passing variables to child component doesn't update reactively when dragging parent
body: <p>I have a component (&quot;Mover.svelte&quot;) that's responsible for providing mouse-drag functionality to whatever component is in its  (&quot;Button.svelte&quot; in this case.)</p>
  <p>I'm trying to display the current X/Y position in the child object, which works, but doesn't update reactively as the object moves. (There's no error message, just not working as expected.)</p>
  <p>I have tried a variety of ways to do this, including Svelte's context API, but none of the approaches I've tried seem to enable the reactivity.</p>
  <p>REPL:
  <a href="https://svelte.dev/repl/1d2b72dbf8aa465fa60b76f2e93fb0cc?version=3.49.0" rel="nofollow noreferrer">https://svelte.dev/repl/1d2b72dbf8aa465fa60b76f2e93fb0cc?version=3.49.0</a></p>
  <p>app.svelte:</p>
  <pre><code>&lt;script&gt;
      import Mover from &quot;./Mover.svelte&quot;;
      import Button from &quot;./Button.svelte&quot;;
  &lt;/script&gt;
  
  &lt;Mover&gt;
          &lt;Button /&gt;
  &lt;/Mover&gt;
  </code></pre>
  <p>Mover.svelte:</p>
  <pre><code>&lt;script&gt;
      
      import { setContext } from 'svelte';
  
      let moving = false;
      export let x = 120;
      export let y = 130;
      
      setContext('x', x);
      setContext('y', y);
  
      function dragItem(e) {
          if (moving) {
              x += e.movementX;
              y += e.movementY;
          }
      }
      
  &lt;/script&gt;
  
  &lt;div on:mousedown={() =&gt; moving = true} on:mouseup={() =&gt; moving = false} style=&quot;left: {x}px; top: {y}px;&quot;&gt;
      &lt;slot /&gt;
  &lt;/div&gt;
  
  &lt;svelte:window on:mousemove={dragItem} /&gt;
  
  &lt;style&gt;
      div {
          margin: 0;
          padding: 0;
          position: absolute;
          border: 4px solid green;
      }
  &lt;/style&gt;
  </code></pre>
  <p>Button.svelte:</p>
  <pre><code>&lt;script&gt;
      import { getContext } from 'svelte';
      
      let x = getContext('x')
      let y = getContext('y')
      
  &lt;/script&gt;
      
  
  &lt;button&gt;
      X/Y should update on drag:
      {x}, {y}
  &lt;/button&gt;
      
  
  &lt;style&gt;
      button {
          border: 4px solid blue;
          margin: 0;
          padding: 12;
      }
  &lt;/style&gt;
  </code></pre>
  <p>Any help would be greatly appreciated.</p>