Vue, transition-group возможно ли назначить компонент как обертку?

Question

[Александр]

Использую компонент VueAwesomeSwiper для слайдеров.
Но случилась такая беда, что мне нужно использовать transition-group для анимации фильтрации блоков внутри этого слайдера.
А из-за того, что transition-group создает свою обертку в слайдере оказывается только 1 слайд, как раз эта обертка.
Сам вопрос таков, возможно ли назначить в обертку компонент swiper?

<swiper :options="projectSwiperOption">
                     <transition-group name="animate-filter-grid" tag="div" class="all-projects__grid" > 
                        <swiper-slide class="all-projects__item " :class="'all-projects__item_'+project.widthClass" v-for="project in projectFiltered" :key="project.id" >
                            <div class="all-projects__item-wrapper">
                                <div class="all-projects__item-bg">
                                   <img :src="project.img" :alt="project.title">
                                </div>
                                <div class="all-projects__item-content">
                                    <div class="all-projects__item-title" v-html="project.title"></div>
                                    <div class="all-projects__item-description" v-html="project.description"></div>
                                    <div class="all-projects__item-zoom">
                                       <img src="img/projects/zoom.svg" alt="">
                                    </div>                           
                                </div>
                                <div class="all-projects__tags">
                                    <div class="all-projects__tags-item" v-for="tag in project.tags">
                                        {{tag.title}}
                                    </div>                      
                                </div>
                            </div>    
                        </swiper-slide>
                        </transition-group>
                    </swiper>

Выше показанный код превратится в(схематично)

<div class="swiper">
   <div class="all-projects__grid">
         ....слайды
   </div>
</div>

Из-за этого как выше написал, начинаются проблемы со слайдеров(
Если назначить компонент как обертку для transition-group нет возможности, подскажите мб кто-то сталкивался с таким?

Js компонента

Vue.component('project-item', {
    props: ['filter_word'],
    data: function () {
        return {
            projects: [
                {
                    id: 0,
                    show: true,
                    title: 'Тест',
                    description: 'Lorem ipsum',
                    img: 'img/projects/item_medium.png',
                    widthClass: 'medium',
                    tags: [
                        {
                            id: 1,
                            title: 'Веб'
                        },
                        {
                            id: 3,
                            title: 'Полиграфия'
                        }
                    ]
                }
            ],
            projectSwiperOption: {
                slidesPerView: 'auto',
                spaceBetween: 30,
                freeMode: true,
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true,
                    renderBullet(index, className) {
                        return `<span class="${className} swiper-pagination-bullet-custom"></span>`
                    }
                }
            }
        }
    },
    computed: {
        projectFiltered: function () {
            let projects = this.projects;
            if (this.filter_word !== 'Все') {
                projects = projects.filter(project => {
                    return project.tags.filter(tagItem => {
                        return tagItem.title.indexOf(this.filter_word) > -1;
                    }).length
                });
            }
            return projects
        }
    }

});