刚学vue,想用vue实现一个选项卡功能，可是却报错，网上查找也没查找到什么原因。麻烦大家能够帮忙指点指点，谢谢！

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>选项卡</title>
<style>

</style>



<style>
    li {
        list-style: none;
        float: left;
        margin-right: 20px;
    }
    
    .div-content-wrap {
        width: 200px;
        height: 100px;
    }
    
    .div-content {
        width: 200px;
        height: 100%;
    }
    
    .active {
        color: #ff0000;
    }
</style>

</head>

<body>

<div id="app">
    <ul class="clearfix">
        <li v-for="(list,index) in lists" :key="index" v-on:click="showCurrentcontent(index)" v-bind:class="{active: isActive == index}">
            {{list}}
        </li>
    </ul>
    <div class="div-content-wrap">
        <component is="currentTabContent"></component>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var lists = [
        "选项卡1",
        "选项卡2",
        "选项卡3"
    ];
    var content1 = {
        template: "<div class='div-content'>选项卡1</div>"
    };
    var content2 = {
        template: "<div class='div-content'>选项卡2</div>"
    };
    var content3 = {
        template: "<div class='div-content'>选项卡3</div>"
    };
    new Vue({
        el: "#app",
        data: {
            index: 0,
            lists: lists,
            isActive: 0,
            arr: [content1, content2, content3]
        },
        components: {
            "content1": content1,
            "content2": content2,
            "content3": content3
        },
        computed: {
            currentTabContent: function() {
                return this.arr[this.isActive]
            }
        },
        method: {
            showCurrentcontent: function(index) {
                console.log(index);
                this.isActive = index;
            }
        }
    })
</script>

</body>

</html>