Vue Draggable children ignore parent CSS outline

Question

I've got an array of contacts, which contain either a single person with a name or a group with a name and members. I want the groups to be outlined but still wrap. I can get it to work in a display state but the outline breaks when incorporate vue-draggable.

Here is a minimal example: https://codepen.io/FiveSecDelay/pen/BagGVgb

Is there a way to keep the groups outlined like the wanted result?

Code in pen:

Draggable:
  <div class="groupContainer">
    <p class="group">
      <draggable v-model="modules.contacts" group="contacts" handle=".handle" item-key="id">
        <template #item="{ element }">
          <span v-if="element.members?.length > 0" class="contactGroup handle">
            {{ element.name }}[{{ element.members.length }}]=
            <draggable v-model="element.members" group="contacts" handle=".handle" item-key="id">
              <template #item="{ element: groupMember }">
                <span class="handle">
                  {{ groupMember.name }},
                </span>
              </template>
            </draggable>
          </span>
          <span v-else class="handle">
            {{ element.name }},
          </span>
        </template>
      </draggable>
    </p>
  </div>
  <div>
    Wanted Result:
    <div class="groupContainer">
      <span v-for="contact in modules.contacts" :key="contact.name">
        <span v-if="contact.members?.length > 0" class="contactGroup">
          {{ contact.name }}[{{ contact.members.length }}]=
          <span v-for="groupMember in contact.members" :key="groupMember.name">
            {{ groupMember.name }},
          </span>
        </span>
        <span v-else>{{ contact.name }}, </span>
      </span>
    </div>
  </div>

Answer 1

I was able to fix by adding tag="span' to the draggable elements.

<draggable tag="span" v-model="modules.contacts" group="contacts" handle=".handle" item-key="id">