Why is this element not reactive?

<TJSSelect options="{manaTypes}" bind:value='{$doc.system.manaType}' />

<script>
  import { getContext } from "svelte";
  const doc = getContext("#doc");
</script>

<svelte:options accessors={true} />

<script>
  import { ApplicationShell } from "@typhonjs-fvtt/runtime/svelte/component/core";
  import { setContext, getContext } from "svelte";
  import SpellHeader from "~/components/item/type/spell/SpellHeader.svelte";
  import SpellTabs from "~/components/item/type/spell/SpellTabs.svelte";

  export let elementRoot; //- passed in by SvelteApplication
  export let documentStore; //- passed in by DocumentSheet.js where it attaches DocumentShell to the DOM body
  export let document; //- passed in by DocumentSheet.js where it attaches DocumentShell to the DOM body
  const tabMap = {
    spell: SpellTabs,
  };
  const application = getContext("external").application;
  let activeTab = "description";

  setContext("#doc", documentStore);

  $: item = $documentStore;

</script>

<template lang="pug">
      svelte:component(this="{headerMap[item.type]}")
      svelte:component(this="{tabMap[item.type]}")
</template>