Передача DOM-узлов через Vue Prop плохая практика

Question

Я сейчас нахожусь в процессе написания компонента Карусель и пытаюсь выбрать лучший метод реализации.

См. Следующий компонент:

<template>

    <!-- Carousel -->
    <div class="carousel-container">

        <div ref="carousel" class="carousel">
            <slot></slot>
        </div>

        <carousel-navigation v-if="items.length" :orientation="orientation" :container="$refs.carousel" :items="items"></carousel-navigation>

    </div>

</template>

<script>

    import CarouselNavigation from 'core-js/components/common/CarouselNavigation';

    export default {

        components: {
            'carousel-navigation': CarouselNavigation
        },

        props: {

            orientation: {
                type: String,
                required: false,
                default: 'horizontal',
                validator: (value) => {
                    return ['horizontal', 'vertical'].indexOf(value) !== -1;
                }
            }

        },

        data() {
            return {
                items: []
            }
        },

        mounted () {
            this.items = [...this.$refs.carousel.children];
        }

    }

</script>

Компонент carousel-navigation принимает различные реквизиты, но конкретно items и container.

Ожидается, что опора container будет одним узлом DOM, а опора items - массивом узлов DOM.

Причина, по которой мне нужно пропускать узлы DOM, заключается в том, что carousel-navigation нужно знать, куда прокручиваться (items) и что прокручивать (container).

Это плохая практика? Если это так, что может быть лучше для достижения этой цели?