Livewire 3 @assets directive not working on Laravel Vapor app

I have this blade component that is loaded in a loop on a livewire page. When I run the app locally everything is included in the component that is in the @assets block. When I deploy the application to laravel vapor none of those assets are included on the page. At one point I included a \Log::info() inside the assets directive and it runs on vapor when the page loads, but the assets are not included on the page.

Anyone have any insights as to where I should start debugging. I've tried everything I can think of and can't make any progress. Thanks in advance.

<div wire:key="question-{{$question->id}}">
    <x-input.group-full-width
        x-cloak
        class="p-1"
        x-data="froala('{{ $question->id }}', '{{ $question->statePath }}', '{{ $question->value }}')"
        :label="$question->label"
        :for="$question->id"
        :helpTextTop="$question->helperText"
        :error="$errors->first($question->id)"
        :required="$question->required"
        radius="rounded-xl"
    >
        <div class="mt-1">
            <div
                wire:ignore
                class="froala-editor"
                id="editor-{{$question->id}}"
                data-question-id="{{$question->id}}"
            >
                {{-- Editor content will end up here. --}}
            </div>
        </div>
    </x-input.group-full-width>
</div>

@assets
<!-- Include Editor JavaScript file-->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/js/froala_editor.pkgd.min.js"></script>
@endassets

@script
<script>
  Alpine.data('froala', (questionId, statePath, initialContent) => ({
    editor: null,
    init() {
      let config = froalaConfig
      const debouncedContentChange = _debounce(() => {
        this.$wire.set(statePath, this.editor.html.get());
      }, 2000);
      config.autofocus = false
      const htmlAllowedStyleProps = [
        'font-size', 'background', 'color',
        'width', 'text-align',
        'vertical-align', 'background-color'
      ]
      const htmlAllowedContent = [
        'input[type="checkbox"]',
        'input[type="radio"]',
        'div',
        'span',
        'p',
        'h1',
        'h2',
        'h3',
        'h4',
        'h5',
        'h6',
      ]

      config.pasteAllowedStyleProps = config.htmlAllowedStyleProps  = htmlAllowedStyleProps
      config.pasteAllowedContent = config.htmlAllowedContent = htmlAllowedContent
      config.heightMax = null
      config.height = 'auto'
      config.toolbarButtons.tools = {
        buttons: ['templateManager', 'insertTable'],
      }

      this.editor = new FroalaEditor(`#editor-${questionId}`, {
        ...config,
        events: {
          contentChanged: debouncedContentChange,
          blur: (e) => {
            // Return if the event is a checkbox or radio button.
            if (e.target && e.target.matches('input[type="checkbox"]')) {
              return;
            }
            if (e.target && e.target.matches('input[type="radio"]')) {
              return;
            }
            
            // Save the selection so that inserted templates end up where the cursor was before the blur.
            this.editor.selection.save()
            
          },
          focus: (e) => {
            // Return if the event is a checkbox or radio button.
            if (e.target && e.target.matches('input[type="checkbox"]')) {
              return;
            }
            if (e.target && e.target.matches('input[type="radio"]')) {
              return;
            }

            // Restore the selection so that inserted templates end up where the cursor was before the focus.
            this.editor.selection.restore()
          },
          click: (e) => {
            // Always hide the table edit popup first
            this.editor.popups.hide('table.edit')
            
            if (e.target?.tagName === 'LABEL' || e.target?.tagName === 'INPUT') {
              // Hide all popups before the content is saved.
              this.editor.popups.hideAll()
              
              // Wait for the next tick to hide the popups so that the popups are hidden before the content is saved.
              this.$nextTick(() => {
                this.editor.popups.hideAll()
              })

              // Fire the contentChanged event so that the answer is saved
              this.editor.events.trigger('contentChanged')

              return; // Exit early for form inputs
            }

            // Only show table popup if we're clicking directly on a TD element
            if (e.target?.tagName === 'TD') { 
                this.editor.popups.show('table.edit')
            }
          },
          initialized: () => {
            this.editor.html.set(initialContent)
            
            // Randomize radio buttons so that they are copyable from history later.
            let node = document.getElementById('note-form-wrap')
            randomizeRadioButtons(node)
          }
        }
      })

      FroalaEditor.DefineIcon('insertTemplateIcon', {
        NAME: 'Insert Template',
        PATH: 'M0,3l9,4v12l-9-4V3z M14,0v2c0,1.1-2.24,2-5,2S4,3.1,4,2V0c0,1.1,2.24,2,5,2S14,1.1,14,0z M18,3L9,7v12l9-4V3z',
      })

      FroalaEditor.RegisterCommand('templateManager', {
        title: 'Insert Template',
        icon: 'insertTemplateIcon',
        focus: false,
        undo: false,
        refreshAfterCallback: false,
        callback: function () {
          window.dispatchEvent(new CustomEvent('toggle-templates', {detail: {editor: this}}))
        },
      })

      // Add js event listener to remove the keys fr-copied-* from the local storage
      // when the window is unloaded
      window.addEventListener('beforeunload', () => {
        localStorage.removeItem('fr-copied-html')
        localStorage.removeItem('fr-copied-text')
      })

      window.addEventListener('add-to-note', (e) => {
        const froala = e.detail.editor
        if (froala && this.editor.id === froala.id) {
          froala.selection.restore()
          froala.html.insert(e.detail.content, false)

          // Randomize radio buttons so that they are copyable from history later.
          let node = document.getElementById('note-form-wrap')
          randomizeRadioButtons(node)

          froala.undo.saveStep()
        }
      })
    }
  }))
</script>
@endscript