[Vuejs]-Vue.js component not getting the value from a variable

To pass value from Laravel to Vue component, encode it first.

Laravel:

<swatches :value="{{ json_encode($var->hex_color) }}"></swatches>

notice “:” on the property name.
Now, let’s accept that with Vue.

...
export default {
   props: ['value']
}
...

Now, you should be able to print the prop value:

<p>{{ value }}</p>

console.log(this.value) // Your hexa value passed from Laravel.

You have v-model indicated which already means that you are passing “value” to it and on change it should emit “input” event

<swatches v-model="color" colors="text-advanced" value="{{$var->hex_color}}"></swatches>

That’s where the default #ffffff color is coming from, I suppose.

I think, if you remove v-model from there and leave only :value like this:

<swatches colors="text-advanced" :value="{{$var->hex_color}}"></swatches>

It might work. Have you tried it?

Or you can pass color to v-model directly:

<swatches colors="text-advanced" v-model="{{$var->hex_color}}"></swatches>