vue.js实现联动效果

<script src="//cdn.bootcss.com/vue/2.2.4/vue.min.js"></script>
<div id="test">
    <select v-model="selected">
        <option v-for="yx in YX" :value="yx.text">
            {{yx.text}}
        </option>
    </select>
    <select>
        <option v-for="(zy, index) in selection" :value="zy.text" :selected="index == 0 ? true : false">
            {{zy.text}}
        </option>
    </select>
</div>
<script>

    new Vue({
        el: '#test',
        data: {
            selected: '计信院',
            YX: [{
                text: '计信院',
                ZY: [{
                    text: '软件工程'
                }, {
                    text: '计算机科学与技术'
                }, {
                    text: "信息安全"
                }, ]
            }, {
                text: '商学院',
                ZY: [{
                    text: '旅游管理'
                }, {
                    text: '工商管理'
                }, {
                    text: "行政管理"
                }, ]
            }, ]
        },
        computed: {
            selection: {
                get: function() {
                    var that = this;
                    return this.YX.filter(function(item) {
                        return item.text == that.selected;
                    })[0].ZY;
                }
            }
        }
    });
</script>