Programmatically render template

I have an issue with cluttered .vue file. I have table row component, which contains of 4 columns. 4th column contains actions items and these action items can be changed depending on certain actions. By action items I mean it can be buttons, card, empty, tag.

My question is how to reduce whatever is inside of this column. By reducing I mean how to get rid of all these if conditions. The most desirable would be get rid of if-s at all, and this section just renders end result.

This is forth column of the row:

        <div class="bookings-table-column bookings-table-column--forth">
            <portal v-if="booking.is_first_booking && !firstBookingConfirmationCallMade" to="mobile" :disabled="$mq === 'desktop'">
                <Card 
                    @onClick="openContactDetails"
                    paragraphText="Bitte rufe Deinen Kunden innerhalb von 24h an und besprecht diesen Ersttermin" 
                    :btnText="$mq === 'desktop' ? 'Kontaktdetails' : 'Kunden anrufen'"
                    :buttonIcon="$mq === 'desktop' ? '' : 'MCPhone'"
                />
                <MCButton 
                    @click="alertMessage" 
                    text="ich habe bereits angerufen" 
                    buttonIcon="check"
                    class="btn-grey"
                    color="grey"
                    :rounder="false"
                />
            </portal>

            <portal v-else-if="booking.is_first_booking && firstBookingConfirmationCallMade" to="mobile" :disabled="$mq === 'desktop'">
                <h3>Are you meeting?</h3>
            </portal>
            
            <div v-else-if="isActionItemsShown">
                <icon-text 
                    v-if="booking.canBeFulfilled"
                    @onClick="showFulfillBookingOverlay"
                    text="Dokumentieren"
                    class="bookings-table-column__forth--action-item"
                    v-bind="documentIconTextAttrs"
                />
     
                <icon-text 
                    @onClick="showEditBookingOverlay"
                    text="Bearbeiten"
                    class="bookings-table-column__forth--action-item"
                    v-bind="editIconTextAttrs"
                />
            </div>

            <div v-if="type !== 'open'">
                <div class="bookingsTableContentRow_column_actionItem is-disabled">
                    <icon-text 
                        v-if="!isBookingFromNewDB && !booking.billable"
                        @onClick="$emit('show-overlay', booking, 'documentation', 'edit')"
                        text="Bearbeiten"
                        class="bookings-table-column__forth--action-item"
                        v-bind="editIconTextAttrs"
                    />
            
                    <span class="bookingsTableContentRow_column_actionItem_tooltip">
                        kann nicht mehr bearbeitet werden
                    </span>

                    <icon-text 
                        v-if="booking.billable && !isBookingFromNewDB"
                        text="Bearbeiten"
                        class="bookingsTableContentRow_column_actionItem is-disabled"
                        v-bind="editIconTextAttrs"
                    />
                </div>
                <div
                    v-if="!isBookingFromNewDB && !booking.billable"
                    class="bookings-table-column__forth--action-item"
                >
                    <span class="bookingsTableContentRow_column_actionItem_tagText is-disabled">
                        In Prüfung
                    </span>
                </div>
                <div v-else class="bookings-table-column__forth--action-item">
                    <span class="bookingsTableContentRow_column_actionItem_tagText">
                        Abgeschlossen
                    </span>
                </div>
            </div>
        </div>```

computed and component maybe helpful.

<component :is="dynamicComp"></component>

and in computed:

computed: {
        dynamicComp() {
            let index = filters(condition);// if blocks 
            return compList[index]; // component name
        }
    },