title: Vue.js "Maximum call stack size exceeded" error. Passing data from parent to child failing
body: <p>I cannot pass data from parent to child. I am using props, have tried returning data as well - no luck. I have a panel component (which is parent) with data and panelBody component (child)</p>
  
  <p>Panel is as follows:</p>
  
  <pre><code>&lt;template&gt;
    &lt;div id="panel"&gt;
      &lt;div class="panel"&gt;
        &lt;ul&gt;
          &lt;li v-for="shelf in shelfs"&gt;
            &lt;panel-body :shelf="shelf" :selected.sync="selected"&gt;&lt;/panel-body&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import PanelBody from '../components/PanelBody'
  export default {
    name: 'panel-body',
    components: {
      'panel-body': PanelBody
    },
    data: () =&gt; ({
      shelfs: [{
        name: 'shelf 1',
        books: [{
          title: 'Lorem ipum'
        }, {
          title: 'Dolor sit amet'
        }]
      }, {
        name: 'shelf 2',
        books: [{
          title: 'Ipsum lorem'
        }, {
          title: 'Amet sit dolor'
        }]
      }],
      selected: {}
    })
  }
  &lt;/script&gt;
  
  &lt;style scoped&gt;
  a {
    color: #42b983;
  }
  &lt;/style&gt;
  </code></pre>
  
  <p>My panelBody is:</p>
  
  <pre><code>&lt;template&gt;
    &lt;div id="panel-body"&gt;
      &lt;a href="#" v-on:click.prevent.stop="select"&gt;{{ shelf.name }}&lt;/a&gt;
      &lt;ul v-show="isSelected"&gt;
        &lt;li v-for="book in shelf.books"&gt;{{ book.title }}&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    name: 'panel-body',
    props: ['shelf', 'selected'],
    computed: {
      isSelected: function () {
        return this.selected === this.shelf
      }
    },
    methods: {
      select: function () {
        this.selected = this.shelf
      }
    }
  }
  &lt;/script&gt;
  
  &lt;style scoped&gt;
  a {
    color: #42b983;
  }
  &lt;/style&gt;
  </code></pre>
  
  <p>Please help! Can't figure out the error "vue.esm.js?65d7:3877 Uncaught RangeError: Maximum call stack size exceeded". WHen I remove the data everything works like it should.</p>