Vue.js seems to ignore inline-template directive? - vuejs2

Question

I'm having trouble getting vue.js 2 to recognise an inline-template directive with a component.
There is a wrapping div inside the component tags; and tried it with or without a default template in the component definition.
This has worked for other components (and works for this component with a different html) but, for some reason, fails to work in this use case.
I've checked the html and it seems to be valid.
However, when I add #click to the controls (eg. #click="prev()") I get an "Invalid Character" error. And if I add {{ offset }} into the html it doesn't get replaced. I'm assuming this is because it's using the default template/slot definition.
As far as I can see it's just not recognising the inline-template attribute.
Any suggestions as to what I might be missing would be appreciated, thank you.
vue.js snippet:
'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 snippet:
<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"><i class="glyphicons glyphicons-chevron-left"></i></li>
<li class="controls__next"><i class="glyphicons glyphicons-chevron-right"></i></li>
</ul>
</div>
</div>
</slider>