Pass data from blade to vue and keep parent-child in sync?

I know that in Vue parents should update the children through props and children should update their parents through events.

Assume this is my parent component .vue file:

<template>
<div>
    <my-child-component :category="category"></my-child-component>
</div>
</template>

<script>
export default {
  data: {
     return {
       category: 'Test'
     }
  }
}
</script>

When I update the category data in this component, it will also update the category props in my-child-component.

Now, when I want to use Vue in Laravel, I usually use an inline template and pass the value from the blade directly to my components (as for example also suggested at https://stackoverflow.com/a/49299066/2311074).

So the above example my my-parent-component.blade.php could look like this:

@push('scripts')
   <script src="/app.js"></script>
@endpush

<my-parent-component inline-template>
    <my-child-component :category=""></my-child-component>
</my-parent-component>

But now my-parent-component is not aware about the data of category. Basically only the child knows the category and there is no communication between parent and child about it.

How can I pass the data from blade without breaking the parent and child communication?

from Newest questions tagged laravel-5 - Stack Overflow https://ift.tt/2HS2JeM
via IFTTT