title: Create Vue.js object on existing data
body: <p>I have the following code generated by my server :</p>
  
  <pre><code>&lt;div id="app-4" data-server-rendered="true"&gt;
    &lt;ul&gt;
      &lt;li&gt;Article 1 test1&lt;/li&gt;
      &lt;li&gt;Article 2 test2&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Now with Vue.js, I would like to generate again this code if data changes. Is that possible ?</p>
  
  <p>I tried to do something but it doesn't work :</p>
  
  <pre><code>var app4 = new Vue({
    el: '#app-4',
    props: ["todo"],
    template: '  &lt;ul&gt;\n' +
    '    &lt;li v-for="todo in todos"&gt;\n' +
    '      {{ todo.title }} {{ todo.text }}' +
    '    &lt;/li&gt;\n' +
    '  &lt;/ul&gt;',
    data: {
      todos: [
        { title: 'Article 3', text:"test1" },
        { title: 'Article 4', text:"test2" },
        { title: 'Article 5', text:"test3" }
      ]
    }
  })
  </code></pre>
  
  <p>Theoritically, as I put a data.todos value which is not the same than in output generated by the server, it should change. But it stays with my 2 li. If I remove data-server-rendered="true", it will display my 3 li.</p>