Vue Named Slot Won't Render Text or Divs That Contain Text Vue 2

Question

I have created some reusable Modal components moving our app away from jQuery and Bootstrap.

I patterned these components after the components in Laravel Jetstream (Inertia) stack.

First I have a top level DialogContainer which houses the transitions and backdrop and then a generic slot. This top level component is also wrapped in a call to portal-vue so that all my modals are sent to the dialog-helper.

For brevity I'll remove all the Tailwind classes which are straight from TailwindUI.

<template>
  <portal to="dialog-helper">
    <Transition attrs>
      ...
      <div v-show="show" class="classes">
        <slot v-if="show" />
      </div>
    </Transition>
  </portal>
</template>

Next I have several different types of Dialogs, a Fullscreen, Footed, Confirm, Plain Panel etc. These all have named slots for different sections, and are wrapped with the DialogContainer

Confirm Dialog

<template>
  <DialogContainer :show="show" :max-width="maxWidth" :closeable="closeable" @close="closeDialog">
    ...
    <h3 class="classes">
      <slot name="title" />
    </h3>
    ...
    <div class="classes">
      <slot name="content" />
    </div>
    ...
    <div class="classes">
      <CancelButton />
      <ConfirmButton />
    </div>
    ...
  </DialogContainer>
</template>

Then when I want to use the confirm dialog in a template:

<ConfirmDialog :show="isOpen" @close="isOpen = false" @confirmed="someMethod">
  <template #title>Are You Sure You Want to Delete This Item?</template>
  <template #content>Deleting this will cause a complete nuclear meltdown, this isn't reversable!</template> // this works

  <template #content>
    <div class="row">
      <div class="form-group col-md-12" :class="{ 'has-error': validation.max }">
        <label class="control-label">Maximum Percentage</label>
        <input class="form-control" v-model="form.max" placeholder="Maximum ..." type="number" />
        <span class="help-block" v-if="validation.max">
          {{ validation.max[0] }}
        </span>
      </div>
    </div>
  </template> // This works fine, no problems.

  <template #content>
    <div class="alert alert-warning">
      Romantic notes required for Christmas will get auto-populated on the document when rendered.
    </div>
  </template> // won't open and gives no error in console

  <template #content>
    <WarningAlert> // even wrapped in a component ... 
      <p>Romantic notes required for Christmas will get auto-populated on the document when rendered.</p>
    </WarningAlert>
  </template> // NOPE, this doesn't work either.
</ConfirmDialog>

Can anyone tell me what I'm doing wrong, this exact strategy works in Jetstream, but something isn't working for me here.

UPDATE

I've discovered that I'm able to place plain text up to 109 characters in length. After that it fails ... wth?