Issue while trying to pass json of translation key-value from laravel blade to vue.js

Question

This is my translation file

return [
    "Key1" =>  "Message 1",
    "Key2" => "Message 2",
    "Key3" => "Message 3",
    "Key4" => "Message 4",
    "Key5" => "Message 5",
    "Key6" => "Message 6",
    "Key7" => "Message 7",
    "Key8" => "Message 8",
];

This is the code in Laravel Blade

<profile
    v-bind:ErrorMessages= "{                            
    Messages: '{!! json_encode(Lang::get('Profile')) !!}'
}">                                
</profile>

In the above component, I am trying to pass the complete translation file from laravel blade to Vue.js

But, the above code print all keys in the web page and disturbs the whole layout.

Am I missing anything to pass the json in correct format from laravel to Vue.js

Update 1

I am able to pass the object from laravel to vue.js using below code. But below is more like manual work typing each translation key of a file one by one.

<profile
    v-bind:messages= "{                            
    Key1: '{!! trans('Profile.Key1') !!}',
    Key2: '{!! trans('Profile.Key2') !!}',
    Key3: '{!! trans('Profile.Key3') !!}',
    Key4: '{!! trans('Profile.Key4') !!}',
    Key5: '{!! trans('Profile.Key5') !!}',
    Key6: '{!! trans('Profile.Key6') !!}',
    Key7: '{!! trans('Profile.Key7') !!}',
    Key8: '{!! trans('Profile.Key8') !!}'
}">                                
</profile>

Answer 1

Try this:

<profile
    v-bind:ErrorMessages= "'{!! json_encode(Lang::get('Profile')) !!}'">                                
</profile>

Note about additional ' between " and { - so you'll pass what you want as string.