How to properly pass JSON to vue js component?

Question

Vue.js

From the site template to the component I pass data for initialization in json:

<div id="root">
            <my-component  docs='{{ json }}' />
        </div>

A string gets into the component, in the this.docs property, it must be parsed to get the object.
But it doesn't work like this:

const my-component = {
        props: ['docs'],
        data: function() {
            return {
                docs: JSON.parse(this.docs)
            };
        },
    };

You cannot change the incoming properties.
Of course, I can create a new property, like docs2 and just save the json in the docs property for memory, but I don’t like this idea :)
Where would it be more correct to parse the string?

Answer 1

<my-component :docs='{{ json }}' />
And no JSON.parse is needed, docs will be an object.