SWUP works on initial page load, fails on first request, and succeeds on every subsequent request?

I am using swup.js with a Laravel project that also uses Livewire. I almost have it working right, but I’m getting a bizarre error.

Here’s the situation:

• The first page loads perfectly fine. Everything works as intended.
• Once you click a swup link and “load” your next page, everything fails. No Javascript will be executed, Livewire can’t function, either.
• But, once you make your second trip to that page by clicking the link, it’s as if everything has loaded correctly in cache and is working – Javascript, Livewire, everything seems fine.

I can’t figure out why this is happening. Here is my setup + code:

app.js:

import Swup from 'swup';
import SwupScriptsPlugin from '@swup/scripts-plugin';
import SwupLivewirePlugin from '@swup/livewire-plugin';

const swup = new Swup({
    cache: false,
    debugMode: true,
  plugins: [
      new SwupLivewirePlugin(),
      new SwupScriptsPlugin({
          head: true,
          body: true,
          optin: true
      }),
  ]
});

My master blade template, layouts.app.blade.php:

...
<livewire:scripts />

<main id="swup" class="">
    @yield('content')
    <script data-swup-ignore-script src="{{ asset('js/app.js') }}"></script>
    @yield('js')
</main>
...

My home.blade.php file:

@extends('layouts.app')

@section('content')
<section class="mt-24 mb-32 py-12 relative">
  <div class="max-w-7xl mx-auto px-4">
        <div class="flex flex-col space-y-3 lg:w-1/2 w-full ml-auto">
          <span class="block text-3xl xl:inline">I'm a...</span>
          <span id="role" class="block text-indigo-600 xl:inline text-7xl">Hymn Writer</span>
        </div>
      </div>
    </div>
  </div>
</section>
@endsection


...

@section('js')
<script data-swup-reload-script src="https://cdnjs.cloudflare.com/ajax/libs/TypewriterJS/2.17.0/core.min.js" integrity="sha512-o6alMAMTI5qAmVC1UvuRPgTl3UOOkP8NZ6212+rq1Oslsuy8Owt9r5Z0Wu0LNxpw/Q8N8ToGiyovHV+kyOulxg==" crossorigin="anonymous"></script>

<script data-swup-reload-script>
  function init() {
    var role = document.getElementById('role');

    var typewriter = new Typewriter(role, {
        loop: false,
    });

    typewriter.typeString('Hymn Writer')
        .pauseFor(2400)
        .deleteAll()
        .typeString('Father')
        .pauseFor(2400)
        // ...etc
        .start();
  }
  init();

  document.addEventListener('swup:contentReplaced', init);
</script>
@endsection

I can’t figure out why it’s working on initial page load and subsequent link clicks but not the very first time the link is clicked when starting from another page? What is going on here?