title: Can't get data binding to work properly with vue
body: <p>I'm trying to create a vue app.  The test version <a href="https://codesandbox.io/embed/quotetest-tfvfn?fontsize=14" rel="nofollow noreferrer">is here</a>.  The issue I'm dealing with is the vue constructor in main.js needs to set the properties of the Quote object but is not.</p>
  
  <p>The Quote vue file has this.</p>
  
  <pre><code>import card from './components/Card.vue'
  import quoteheader from './components/QuoteHeader.vue'
  
  export default{
    data: function(){
      return {
        title: "",
        quotecards: []
      }
    },
      methods: {
          addCard : function(obj){
              this.quotecards.push(
          {
            id: this.quotecards.length + 1,
            title: obj.title
          }
        );
        //console.log(this.quotecards);
          },
      updateCriteria(tmp){
        ///console.log(tmp);
      }
      },
    components: {
      card, quoteheader
    }
  }
  </code></pre>
  
  <p>The main.js that fires it all up has this.</p>
  
  <pre><code>new Vue({
    el: "#app",
    render: h =&gt; h(Quote, {
      props: {
        title: "test",
          quotecards: [
              { id: 0, title: "title 1"},
              { id: 1, title: "title 2"}
          ]
      }
    })
  })
  </code></pre>
  
  <p>When the app fires up I am expecting that the quotecards data should be an array of 2 items and the text field in the quote vue file's template field should have the value of "test".  Instead, quotecards length is 0 and the input is empty.  </p>