Vue transitioning effects disappear when inside a vue slot

I'm having a hard time getting a vue transition to work inside a slot. I should mention I've searched through numerous stackoverflow questions and I haven't seen one that matches my issue. All the ones I've seen so far are talking about <slot> inside the <transition>, eg: vue transition component doesn't work correctly, whereas for me it's the other way round.

There are three vue components, component1, component2 and component3.

component1 has something like:

<template>
    <slot name="content">
    <slot name="side">
    <slot name="default">
</template>

component2 looks something like below:

<component1>
    <template #content>Some stuff here</template>
    <template #side>Some stuff here</template>
    <template #default>
        <component3/> #Component3 contains the transition stuff
    </template>
</component1>

component3 contains the transition stuff:

    <transition
      :name="right ? 'slide-right': 'slide-left'"
      @before-enter="$emit('before-enter')"
      @after-leave="$emit('after-leave')"
    >
      <div 
        v-show="$attrs.value"
        v-bind="$attrs"
        v-on="listeners"
        class="u-drawer bg-white"
        :class="extraClasses"
        :style="getStyles">
        <slot v-if="!hideClose" name="close">
          <u-button @click="$emit('input', false)"
          class="u-drawer-close-button" icon>
            <u-icon icon="x" size="1rem" class="mx-auto" />
          </u-button>
        </slot>
        <slot name="default" />
      </div>
    </transition>
    <transition name="fade">
      <div v-if="overlay" @click.stop="closeDrawer" v-show="$attrs.value" style="width:100%; height:100%" class="u-overlay"></div>
    </transition>

For whatever reason the transition does not work, it's a drawer that is supposed to slide out but it doesn't, instead it just appears instantaneously.

I should mention that, component3 has been used elsewhere in the project where the sliding effect does occur. The only difference here is that it's within a <slot name=default>. Does anyone know what the problem might be?