How can I pass a JSON string as a prop? – Shopify

I am using Vue.js with Shopify, and I’m hoping to pass objects from Liquid into a Vue component as a prop. For example, if I register the Vue component product-tile, and I want to use Shopify’s product object in Liquid and convert it directly into an object in Vue, I would like to be able to do something like this:

<product-tile product='{{ product | json }}'></product-tile>

Note that the curly brackets here are Liquid and not Vue, I’m using delimiters. My current workaround is to put the data I need in hidden input fields that I then pull in from the DOM after the component is mounted, but being able to pass the Liquid directly into the Vue component would be a much cleaner solution.

I get errors with the above code because Vue doesn’t seem to like a JSON string being passed in as a prop in this way. The specific error is:

Template compilation error: Unquoted attribute value cannot contain U+0022 ("), U+0027 (‘), U+003C (<), U+003D (=), and U+0060 (`).

Is there a other way to accomplish this without my current workaround?