Vuejs change view - vue.js

Question

I'm trying to change views on page load and on click events.
Here is what I have so far:
Vue.component('stale', {
template: '#stale-template'
});
Vue.component('buying', {
template: '#buying-template'
});
var vm = new Vue({
el: '.slot-container',
data: {
currentView: 'stale'
},
methods: {
buyTemplate: function(e) {
this.currentView = 'buying';
}
}
});
This is my HTML:
<div class="slot-container">
<component is="{{currentView}}"
v-transition="fade"
transition-mode="out-in">
</component>
</div><!-- END .SLOT-CONTAINER -->
<script id="stale-template" type="x-template">
STALE
<div class="slot stale">
<div class="row">
<div class="half">
<div class="buy-icon" v-on="click : buyTemplate">
<img src="{{ Asset.to('img/exchange/buy-icon.png') }}" alt="buy" />
<div class="title">Buy</div>
</div>
</div>
<div class="half">
<div class="sell-icon">
<img src="{{ Asset.to('img/exchange/sell-icon.png') }}" alt="sell" />
<div class="title">Sell</div>
</div>
</div>
</div>
</div>
</script>
<script id="buying-template" type="x-template">
BUYING
<div class="slot buying">
<div class="search">
<form action="{{ url_to('exchange/search') }}" method="post" id="buy-search" class="dark">
<input type="text" value="{{ input_old('item') }}" name="item" class="item-input" placeholder="Search item..." data-autocomplete="{{ url_to('search/item/autocomplete') }}" />
<button type="button" class="exchange-search-btn">Search</button>
</form>
</div>
<div class="results">
</div>
</div>
</script>
You can view the working example here: http://jsfiddle.net/4vgjx61t/
For some odd reason, I can never get anything to initiate to begin with. I'm following the example found here: http://vuejs.org/guide/application.html
Thank you.

Answer 1

You are using syntax valid in Vue 0.12 but are loading Vue 0.11 in the Fiddle. Add this as an external resource to fix it:
https://raw.githubusercontent.com/yyx990803/vue/dev/dist/vue.min.js