Passing whole parameter to Vue component from blade is resulting in 30 additional database queries

Question

I have a Vue component that I'm passing some data to from my blade file as below:

<my-widget :data-aircraft="{{ $aircraft }}"></my-widget>

When I pass the entire $aircraft object to the Vue component, my application is making an additional 30 database queries. If I pass $aircraft->id, those extra 30 queries disappear. The vue component is empty in this case to aid debugging.

Am I missing something that Laravel/Vue is doing in the background when I try to send the whole $aircraft object as a prop? Is it somehow only then lazy-loading my appends attributes on my Aircraft model?

Answer 1

You're "echoing" the object, which means Laravel will load all the model properties and relations. If you were using the variable in blade, relationships will be loaded only when requested.