Vue.js, похоже, игнорирует директиву inline-template?

Question

У меня проблемы с получением vue.js 2 для распознавания директивы inline-template с компонентом.

Внутри тегов компонента есть тег div; и попробовал его с шаблоном по умолчанию или без него в определении компонента.

Это работает для других компонентов (и работает для этого компонента с другим html), но по какой-то причине не работает в этом случае использования.

Я проверил HTML, и, похоже, он действителен.

Однако, когда я добавляю @click к элементам управления (например, @ click = "prev ()"), я получаю ошибку "Invalid Character". И если я добавлю {{offset}} в HTML, он не будет заменен. Я предполагаю, что это потому, что он использует определение шаблона / слота по умолчанию.

Насколько я понимаю, он просто не распознает атрибут inline-template.

Буду признателен за любые предложения относительно того, чего мне не хватает, спасибо.

фрагмент vue.js:

    'slider': {
        computed: {
            animatedOffset: function() {
              return this.targetOffset.toFixed(0);
            }
        },
        watch: {
            offset: function(newValue) {
              TweenLite.to(this.$data, 0.5, { targetOffset: newValue });
            }
        },
        data: function() {
            return {
                offset: 0,
                targetOffset: 0,
                container: null,
                maxWidth: null, 
                width: null
            };
        },
        methods: {
            prev: function() {
                if (this.offset < 0) {
                    this.offset += this.width;
                } else {
                    this.offset = this.width - this.maxWidth;
                }
            },
            next: function() {
                this.offset -= this.width;
                if (this.offset <= -this.maxWidth) {
                    this.offset = 0;
                }
            }
        },
        mounted: function () {
            if (this.$refs.container) {
                this.container = this.$refs.container;
            } else {
                this.container = this.$el;
            }

            this.offset = 0;
            this.width = this.container.offsetWidth;
            this.maxWidth = !this.container.children ? this.width : this.width * this.container.children.length;
        },
        template: `
            <div class="slider">
                <slot></slot>
            </div>
        `
    }

HTML-фрагмент:

<slider inline-template>
<div>
    <div class="timetable__table  row">
        <div class="timetable__label col-sm-3 col-6 p2 p3-sm h3-xs">
            <span>St Mawes Quay</span>
        </div>
        <div class="timetable__wrapper col-sm-9 col-6" ref="container" :style="{ left: animatedOffset+'px' }">
            <div class="timetable__times">
                <p class="timetable__cell p3 bg-zebra-xs">
                    -
                </p>
                <p class="timetable__cell p3 bg-zebra bg-zebra-xs">
                    0945*
                </p>
                <p class="timetable__cell p3 bg-zebra-xs">
                    1135
                </p>
                <p class="timetable__cell p3 bg-zebra">
                    1245
                </p>
                <p class="timetable__cell p3">
                    -
                </p>
                <p class="timetable__cell p3 bg-zebra">
                    -
                </p>
            </div>
        </div>
    </div>
    <div class="timetable__table  row">
        <div class="timetable__label col-sm-3 col-6 p2 p3-sm h3-xs">
            <span class="fg-inherit">FALMOUTH PW Pier</span>
        </div>
        <div class="timetable__wrapper col-sm-9 col-6" ref="container" :style="{ left: animatedOffset+'px' }">
            <div class="timetable__times">
                <p class="timetable__cell p3 bg-zebra-xs">
                    0900
                </p>
                <p class="timetable__cell p3 bg-zebra bg-zebra-xs">
                    1030
                </p>
                <p class="timetable__cell p3 bg-zebra-xs">
                    1215
                </p>
                <p class="timetable__cell p3 bg-zebra">
                    1315
                </p>
                <p class="timetable__cell p3">
                    1515
                </p>
                <p class="timetable__cell p3 bg-zebra">
                    1615
                </p>
            </div>
        </div>
    </div>
    <div class="timetable__table  row">
        <div class="timetable__label col-sm-3 col-6 p2 p3-sm h3-xs">
            <span>St Mawes Quay</span>
        </div>
        <div class="timetable__wrapper col-sm-9 col-6" ref="container" :style="{ left: animatedOffset+'px' }">
            <div class="timetable__times">
                <p class="timetable__cell p3 bg-zebra-xs">
                    <i class="glyphicons glyphicons-circle-arrow-down"></i>
                </p>
                <p class="timetable__cell p3 bg-zebra bg-zebra-xs">
                    <i class="glyphicons glyphicons-circle-arrow-down"></i>
                </p>
                <p class="timetable__cell p3 bg-zebra-xs">
                    <i class="glyphicons glyphicons-circle-arrow-down"></i>
                </p>
                <p class="timetable__cell p3 bg-zebra">
                    <i class="glyphicons glyphicons-circle-arrow-down"></i>
                </p>
                <p class="timetable__cell p3">
                    1535
                </p>
                <p class="timetable__cell p3 bg-zebra">
                    <i class="glyphicons glyphicons-circle-arrow-down"></i>
                </p>
            </div>
        </div>
    </div>
    <div class="timetable__table  row">
        <div class="timetable__label col-sm-3 col-6 p2 p3-sm h3-xs">
            <span>Trelissick Garden</span>
        </div>
        <div class="timetable__wrapper col-sm-9 col-6" ref="container" :style="{ left: animatedOffset+'px' }">
            <div class="timetable__times">
                <p class="timetable__cell p3 bg-zebra-xs">
                    0930
                </p>
                <p class="timetable__cell p3 bg-zebra bg-zebra-xs">
                    1110
                </p>
                <p class="timetable__cell p3 bg-zebra-xs">
                    1255
                </p>
                <p class="timetable__cell p3 bg-zebra">
                    1355
                </p>
                <p class="timetable__cell p3">
                    1610
                </p>
                <p class="timetable__cell p3 bg-zebra">
                    1655
                </p>
            </div>
        </div>
    </div>
    <div class="timetable__table  row">
        <div class="timetable__label col-sm-3 col-6 p2 p3-sm h3-xs">
            <span>TRURO Town Quay</span>
        </div>
        <div class="timetable__wrapper col-sm-9 col-6" ref="container" :style="{ left: animatedOffset+'px' }">
            <div class="timetable__times">
                <p class="timetable__cell p3 bg-zebra-xs">
                    1015
                </p>
                <p class="timetable__cell p3 bg-zebra bg-zebra-xs">
                    1145
                </p>
                <p class="timetable__cell p3 bg-zebra-xs">
                    1330
                </p>
                <p class="timetable__cell p3 bg-zebra">
                    1430
                </p>
                <p class="timetable__cell p3">
                    1645
                </p>
                <p class="timetable__cell p3 bg-zebra">
                    1730
                </p>
            </div>
        </div>
    </div>
    <div class="timetable__controls col-12 hide-lg hide-md hide-sm">
        <ul class="controls">
            <li class="controls__prev"><a href="#" class="controls__link"><i class="glyphicons glyphicons-chevron-left"></i></a></li>
            <li class="controls__next"><a href="#" class="controls__link"><i class="glyphicons glyphicons-chevron-right"></i></a></li>
        </ul>
    </div>
</div>
</slider>