title: vue js passing "top-level" Boolean not working, only nested
body: <p>This is weird. When I define the Boolean property <code>showModal</code> at the top level it is simply being ignored by vue.js. Here's what I am doing:</p>
  
  <pre><code>//Component:
  export default {
    props:['rating', 'showModal'],
    data: function data () {
      return {
        rating: this.rating,
        showModal: this.showModal
      };
    }
  };
  </code></pre>
  
  <p>Invoking the view:</p>
  
  <pre><code>const sharedRating = {
    title: '',
    remark: ''
  };
  
  let showModal = false;
  
  new Vue({
    el: '#rating-edit-container',
    data: {
      showModal: showModal,
      rating: sharedRating
    }
  });
  
  showModal = true;
  </code></pre>
  
  <p>Then both values are being passed to the component:</p>
  
  <pre><code>  &lt;rating-edit
      :rating="rating"
      :show-modal="showModal"&gt;&lt;/rating-edit&gt;
  </code></pre>
  
  <p>But when I change the value of <code>showModal</code> nothing happens.</p>
  
  <p>If I pass <code>showModal</code> inside the rating object and use that nested property everything works fine:</p>
  
  <pre><code>const sharedRating = {
    showModal: false,
    title: '',
    remark: ''
  };
  
  new Vue({
    el: '#rating-edit-container',
    data: {
      rating: sharedRating
    }
  });
  
  sharedRating.showModal = true;
  </code></pre>
  
  <p>Shouldn't "stand alone" boolean properties also be working in Vue or do they always need to be "wrapped"?</p>