"LiveView Not Connected" Error When Pushing Event to Server after navigation

[Morzaram]

Hey guys, I'm not sure if I'm missing something but for some reason when I'm getting the following response when I push_navigate and add something to the pendingThoughtsStore. Is there anything that I'm missing or that I'm doing that can cause the live to not be connected? I'm not using SSR

phx-F8_sqRbGNNZSJk3h hook: unable to push hook event. LiveView not connected - create_thought

However as soon as I refresh the page, it's working just fine. I think it's something to do with push_navigate but I'm not sure

<.svelte
        class="hidden"
        name="selftalk/PendingThoughtProcessor"
        props={%{processed_thought: assigns[:processed_thought]}}
      />

PendingThoughtProcessor.svelte

<script lang="ts">
  import { ThoughtType, thoughtStore } from "../stores";
  import { pendingThoughtsStore } from "../stores";

  export let processed_thought: undefined | ThoughtType;
  export let live;

  $: thoughtStore.update((thoughts) => {
    if (processed_thought) {
      pendingThoughtsStore.update((pendingList) =>
        pendingList.filter((t) => t.localId !== processed_thought.local_id)
      );
      return [...thoughts, processed_thought];
    }
    return thoughts;
  });

  $: pendingThoughtsStore.subscribe((val) => {
    if (val.length > 0 && val.filter((t) => !t.sentToServer).length > 0) {
      pendingThoughtsStore.set(
        val.map((t) => {
          if (!t.sentToServer) {
            live.pushEvent("create_thought", { /// **issue is here**
              local_id: t.localId,
              message: t.message,
              voice_id: t.voiceId,
            });
            t.sentToServer = true;
            return t;
          } else {
            return t;
          }
        })
      );
    }
  });
</script>

Thanks and apologies if this is an obvious thing.