title: When Passing Data Via Props From Laravel, Vue Component Not Rendering, Dumping Data
body: <p>I am getting odd unexpected behavior that I can't seem to find a solution for, and this is the second time it has happened. </p>
  
  <p>Whenever I try to pass Laravel data to a Vue component via props, instead of assigning the value to the prop, it seems to dump the data out to the DOM, and then the component never renders.</p>
  
  <p>In a .vue single file component, I define my props like so:</p>
  
  <pre><code>props: {
      businesses: {
          type: Array,
          required: true
      },
  },
  </code></pre>
  
  <p>In my Laravel Controller, I have the data like so</p>
  
  <pre><code>$a = new \stdClass();
  $a-&gt;name = 'tester';
  $a-&gt;id = 5;
  $a-&gt;desc = "This is getting a bit ridiculous now";
  
  $b = new \stdClass();
  $b-&gt;name = 'Boo ya';
  $b-&gt;id = 2;
  $b-&gt;desc = "Certainly really annoying to me";
  $testStuff = [$a, $b];
  
  return view(
      "businessListing",
      compact('testStuff')
  );
  </code></pre>
  
  <p>In my Laravel Blade template, I have my component setup like this:</p>
  
  <pre><code>&lt;business-listing :businesses="@json($testStuff)"&gt;&lt;/business-listing&gt;
  </code></pre>
  
  <p>Also tried this, even though should be the same, and it provided same result.</p>
  
  <pre><code>&lt;business-listing :businesses="{!! json_encode($testStuff) !!}"&gt;&lt;/business-listing&gt;
  </code></pre>
  
  <p>Then instead of the component being rendered, I see a mashed up version of the json string, the mounted() function never fires, but also no errors in console.  </p>
  
  <p>":"tester","id":5,"desc":"this="" is="" getting="" a="" bit="" ridiculous="" now"},{"name":"boo="" ya","id":2,"desc":"certainly="" really="" annoying="" to="" me"}]"=""></p>
  
  <p><a href="https://i.stack.imgur.com/4VJNL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4VJNL.png" alt="Component Error"></a></p>
  
  <p>If I pass in an empty array, the component renders, mounted() fires as expected, and dumps the empty array to console.  </p>
  
  <p><a href="https://i.stack.imgur.com/2ESVP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2ESVP.png" alt="Component Success"></a></p>
  
  <p>Has anybody else run into this? I cannot figure out what is wrong for the life of me. I should mention - Laravel 5.7/PHP 7.1, Vue 2.5.17.  Thanks for your help.</p>