title: Vue.js: initialize the data object with data from the page or from v-text directive
body: <p>So I'm just starting to play with Vue.js and I would like to know if there is a nice way to initialize the <strong>data</strong> object with html tags content from the page.</p>
  
  <p>Basically I have a page that displays information and I would like to turn it into a tiny Vue application to avoid having a separated edit page.
  So I added the form with 2 way binding which submits the values via ajax.</p>
  
  <p>The thing is I really want to avoid Flash Of Uncompiled Content, but then I feel like I have to duplicate all my data, once in the html tag, once in the data object.</p>
  
  <pre><code>&lt;div id="app"&gt;
    &lt;span v-text="prop1"&gt;This is filled by the backend&lt;/span&gt;
    &lt;input v-model="prop1" type="text" v-cloak /&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
  new Vue({
      el: "#app",
      data: {prop1: "This is filled by the backend..again"}   // &lt;&lt; Can I avoid this?
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>Could I tell Vue to get the data from the html tags since it's already there?</p>
  
  <p>Thanks!</p>