title: prevent displaying component until data loaded with Vue.js
body: <p>Warning: I'm extremely new to Vue.</p>
  
  <p>I'm using it to build a small form widget that can be embedded on various sites for my clients. Each of my clients can customize the form, so I'm using the <a href="https://github.com/icebob/vue-form-generator" rel="nofollow noreferrer">vue-form-generator</a> package to load a custom schema from my API and then generate the form. </p>
  
  <p>I've gotten it to load data, but I'm not sure how to defer loading of that component until the data has finished loading. I attempted to use <code>v-if</code>, but the property seems to be bound to <code>data</code>, which is where I was doing my data loading.</p>
  
  <pre><code>&lt;template&gt;
    &lt;div id="app"&gt;
      &lt;vue-form-generator  v-if="loaded" :schema="schema" :model="model" :options="formOptions"&gt;&lt;/vue-form-generator&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
    import Vue from 'vue'
    import VueFormGenerator from 'vue-form-generator/dist/vfg-core.js'
    import 'vue-form-generator/dist/vfg-core.css'
  
    Vue.use(VueFormGenerator)
  
    export default {
      name: 'app',
  
      data: function () {
        return fetch('http://localhost:3000/forms')
          .then(function (response) {
            loaded = true;
            return response.json()
          }).then(function (json) {
            return json
          }).catch(function (ex) {
            console.log('parsing failed', ex)
          })
      }
    }
  &lt;/script&gt;
  </code></pre>
  
  <p>Is there a better approach here?</p>
  
  <p>Thanks!</p>