title: Populate Vue instance data via json_encode from HTML
body: <p>I'm migrating a super simple <code>AngularJS</code> application into <code>Vue 2</code> as a learning exercise and have hit a wall when trying to migrate some code that currently resides in a <code>ngInit</code> </p>
  
  <p>I have a <code>PHP</code> backend that passes an object to the view, which was effectively handled like</p>
  
  <pre><code>&lt;div ng-init="user = &lt;?php echo json_encode($user); ?&gt;" 
  </code></pre>
  
  <p>This would set the <code>$scope.user</code> property to the user object.</p>
  
  <p>I'm now trying to replicate this in Vue.</p>
  
  <p>From what I've read I could do something like: </p>
  
  <pre><code>&lt;div :user="&lt;?php echo json_encode($user); ?&gt;" 
  </code></pre>
  
  <p>but it was also suggested that <code>props</code> like this should be only for immutable data, and as <code>$user</code> will change a little, I guess thats the wrong thing to do!</p>
  
  <p>I've currently got the below - which doesn't work, as when inspected via dev-tools it shows user as <code>undefined</code>.</p>
  
  <p>So my php template has:</p>
  
  <pre><code>&lt;div :setUser="&lt;?php echo json_encode($user); ?&gt;"
  </code></pre>
  
  <p>This generates the following HTML:</p>
  
  <pre><code>:setUser="{&amp;quot;id&amp;quot;:1,&amp;quot;name&amp;quot;:&amp;quot;Lily&amp;quot;,&amp;quot;email&amp;quot;:&amp;quot;lily@selesti.com&amp;quot;,&amp;quot;wants_food&amp;quot;:0,&amp;quot;food_id&amp;quot;:null,&amp;quot;food&amp;quot;:null}"
  </code></pre>
  
  <p>My javascript has:</p>
  
  <pre><code>window.App = new Vue({
  
      el: '#app',
  
      props: ['setUser'],
  
      data: {
          user: null
      },
  
      mounted() {
          this.user = this.setUser; // also tried JSON.parse(this.setUser);
      }
  }
  </code></pre>
  
  <p>However as mentioned, whenever inspected, <code>user</code> is always <code>undefined</code>, not sure what I'm doing wrong.</p>
  
  <p>In case you want a Fiddle, here is one :) <a href="https://jsfiddle.net/64yeaek1/3/" rel="nofollow noreferrer">https://jsfiddle.net/64yeaek1/3/</a></p>