title: Passing socket.io data to vuejs
body: <p>I have an issue with passing socket.io data to vuejs element. I went through Vue documentation few times and I couldn't find solution for this. Basically, I have a data that's being sent to client via socket.io and console.log prints it perfectly. Now I wanted to use Vue to render html elements with that data, however I have an issue with passing my socket.io data to it.</p>
  
  <p>In Vue documentation there's an example how to do it with static data input.</p>
  
  <pre><code>var example1 = new Vue({
    el: '#example-1',
    data: {
      items: [
        { message: 'Foo' },
        { message: 'Bar' }
      ]
    }
  })
  </code></pre>
  
  <p>So I figured out that I need to convert my data object to string for this. I used JSON.stringify() for this.</p>
  
  <pre><code>var socket = io.connect('http://192.168.1.10');
  socket.on('posts', function (datasocket) {
    var st = JSON.stringify(datasocket);
    var blogposts = new Vue({
      el: '#blogpost',
      data: {
        items: st
      }
    })
  });
  </code></pre>
  
  <p>And HTML</p>
  
  <pre><code>  &lt;div id="blogpost"&gt;
      &lt;div v-for="item in items" class="card" style="width: 20rem;"&gt;
        &lt;div class="card-block"&gt;
          &lt;h4 class="card-title"&gt;{{ item.post_title }}&lt;/h4&gt;
          &lt;p class="card-text"&gt;{{ item.post_excerpt }}&lt;/p&gt;
          &lt;a href="{{ item.post_link }}" class="btn btn-primary"&gt;Go somewhere&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>However, Vue doesn't seem to render anything. In my console when I do console.log on <strong>st</strong>, I get output:</p>
  
  <pre><code>{"content":[{"post_title":"Post title 1","post_excerpt":"Post excerpt 1","post_link":"/post/1"},{"post_title":"Post title 2","post_excerpt":"Post excerpt 2","post_link":"/post/2"},{"post_title":"Post title 3","post_excerpt":"Post excerpt 2","post_link":"/post/3"}]}
  </code></pre>
  
  <p>So any idea how to correctly pass this data to VueJS?</p>