[Vue warn]: Failed to generate render function:

If you are using Laravel and you are passing data in a Blade template like this:

<your-component :value="{{ $myValue }}"></your-component>

It may be that $myValue is null and therefore the error occurs.

A simple way to fix this is to use json_encode before passing values as an attribute to the component:

<your-component :value="{{ json_encode($myValue) }}"></your-component>

The error was in fact as you pointed in there

attrs: {    "type": "text",    "name": "phone",    "value": "",    "id": "phone",    "phone_number":}

"phone_number": here isn't set to anything, that's why Vue squacked and threw an error saying that the } was unexpected.

This is the sort of thing which makes coding in client script 10x slower than on the server. The question is asking about a specific problem, but a more general question is ... how on earth do you track down an error like this in hundreds of lines of HTML and JavaScript?

In my case, the problem was in this line:

<div class="woBuyCheckoutError">{{ Please correct the errors below for your invoice contact details }}</div>

You'll notice I foolishly forgot to remove the {{ }} brackets, so Vue thought that this was a call to a function. MVC would have highlighted this in a nano-second, but I've just spent half an hour trying to track it down.

My advice: try deleting or commenting out large chunks of code until you can find a block containing the syntax error, then reinstate them bit by bit until you find the culprit. Good luck!