Bootsrap/Vue Bug

Uncaught TypeError when using the remove button

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.8/vue.js"></script>
<template id="section-editor">
    <h1>{{ section.title }}</h1>
    <link-editor v-for="link in section.links" :link="link"></link-editor>
</template>


<template id="link-editor">
    <div class="link">
        <a href="{{ link.url }}">{{ link.title }}</a>
        <button @click="removeLink()">Remove</button>
    </div>
</template>
    

<div id="app">
    <section-editor v-for="section in sections" :section="section"></section-editor>
</div>

CSS

.link {
    display:block;

JavaScript

// Section Editor
var SectionEditor = Vue.extend({
    template: '#section-editor',
    props: ['section']
});
Vue.component('section-editor', SectionEditor);

// Link Editor
var LinkEditor = Vue.extend({
    template: '#link-editor',
    props: ['link'],
    methods: {
        removeLink: function() {
            this.$parent.section.links.$remove(this.link);
        }
    }
});
Vue.component('link-editor', LinkEditor);

new Vue({
    el: '#app',
    data: function() {
        return {
            sections: [
                {
                    title: 'One',
                    links: [
                        { title: 'Foo', url: 'http://example.com/foo' },
                        { title: 'Bar', url: 'http://example.com/Bar' }
                    ]
                },
                {
                    title: 'Two',
                    links: [
                        { title: 'Foo', url: 'http://example.com/foo' },
                        { title: 'Bar', url: 'http://example.com/Bar' }
                    ]
                }
            ]
        }
    }
});