使用vue.js实现联动效果

想用vue.js写一个联动效果，按照自己的思路实验了下，并没有成功。请大家指点下
我的思路是：通过遍历YX数组，如果某个对象的text和第一个select的selected value相同，则显示对应院系的专业

<div id="test">
    <select v-model="A">
    <option v-for="yx in YX">
        {{yx.text}}
    </option>
</select>


<select name="ZY">
    <option v-for="zy in {{ selection }}">
        {{zy.text}}
    </option>
</select>
</div>

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