title: Passing data from PHP Twig to Vue component
body: <p>Relatively new to Vue. Liking it, but the info on various sources is contradictory which makes it hard to resolve issues.</p>
  
  <p>I have the following code in my twig file:</p>
  
  <pre><code>&lt;test-component data={{ test.jsonData() }}&gt;&lt;/test-component&gt;
  </code></pre>
  
  <p>test.jsonData() contains the following:</p>
  
  <pre><code>"{"name":"john","lastName":"doe"}"
  </code></pre>
  
  <p>So far so good. My Vue component code looks like this</p>
  
  <pre><code>&lt;template&gt;
    &lt;div class="test"&gt;{{ data }}&lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
      props: {
          data: {
              type: String,
              default: "{}"
          }
      },
      mounted: function () {
          console.log(this.data);
    }
  };
  &lt;/script&gt;
  </code></pre>
  
  <p>This prints out the data as json. Now, the question is, how can I access it like data.name ? What do I need to change?</p>