Svelte not rendering values

I have a very simple Svelte app that's driving me nuts.

<script context="module">
        
    let data;
  const handleClick = async () => {
    data = self.crypto.randomUUID()
    console.log(data)
  };




</script>
  
<button on:click="{handleClick}">
    Click to Load Data
  </button>
  <pre>
    {data}
  </pre>

I can't seem to get the vault of data to render in my page. Just keep getting undefined. However console.log is writing out perfectly.