JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.min.js"></script>
<div id="app">
    <ul>
        <li v-for="shelf in shelfs">
            <shelf :shelf="shelf" :selected.sync="selected"></shelf>
        </li>
    </ul>

    <pre>{{$data | json}}</pre>

    <template id="shelf">
        <a href="#" v-on:click.prevent.stop="select">{{ shelf.name }}</a>
        <ul v-show="isSelected">
            <li v-for="book in shelf.books">{{ book.title }}</li>
        </ul>
    </template>
</div>

JavaScript

var app = new Vue({
        el: '#app',
        data: {
            shelfs: [{
                name: "shelf 1",
                books: [{
                    title: 'Lorem ipum'
                }, {
                    title: 'Dolor sit amet'
                }]
            }, {
                name: "shelf 2",
                books: [{
                    title: 'Ipsum lorem'
                }, {
                    title: 'Amet sit dolor'
                }]
            }],
            selected: {}
        },

        components: {
            shelf: {
                template: "#shelf",
                //data:{
                //    selectedShelf:{}
                //},
                props: ['shelf', 'selected'],
                computed: {
                    isSelected: function() {
                        return this.selected == this.shelf;
                    }
                },
                methods: {
                    select: function() {
                        this.selected = this.shelf;
                    }
                }
            }
        }
    });