How to pass data(json) to vue instance

Your solution was nearly there but you don't need a prop, rather use a data attribute and assign the JSON via a method:

new Vue({    el: '#app',    data: {        json: {},    },    methods: {    	setJson (payload) {        	this.json = payload        },    }})

<script src="https://unpkg.com/vue/dist/vue.js"></script><div id="app" :json="setJson({ foo: 'bar' })">    <pre>{{ json }}</pre></div>

You would just assign your Laravel data to the setJson methods payload, i.e.

:json="setJson({{ $prices }})

I don't know if there is any Laravel helper for this but I will present a generic approach.

One option would be to store you JSON data in a global variable and the page loads and then use it in your js files.

Basically you need to generate some html similar to:

<script>window.myApp = window.myApp || {};window.myApp.userData = { "firstName": "John", "lastName": "Doe" };</script>

Then from javascript you should be able to access the myApp.userData variable and use it when initializing the Vue component.

new Vue({    el: '#app',    data: {        userData: myApp.userData    }});

Here is an example:

new Vue({  el: '#app',  data: {    userData: myApp.userData  }});

<script>  window.myApp = window.myApp || {};  window.myApp.userData = { "firstName": "John", "lastName": "Doe" };</script><div id="app">  Hello {{userData.firstName}}</div><script src="https://unpkg.com/vue/dist/vue.js"></script>

I have upvoted this answer first, but I have to change my vote (can't do it actually not enough reputation...).

Please do not set the data this way, because it will trigger an error like this:[Vue warn]: You may have an infinite update loop in a component render function

If anything will use the data you set this way (watch, render components based on it) you will have an infinite loop.

When you use this method:

1. you set the data in the render function (in the template)
2. if something triggers a re-render, the data will be set again
3. anything using this data will have to re-render, which may cause are-render on the main vue instance

This will cause the infinite loop.

LinusBorg have an explanation here.