Load array from view Laravel to Vue component - laravel

Question

I have a new project and I want to load in a Vue Component an array from view of Laravel.
For testint I have the same html element, SELECT, created by two ways: Laravel and Vue Component.
The html code:
<!-- Laravel SELECT Element -->
<div class="form-group">
<label for="customer">Client</label>
<select
name="customer"
class="form-control #error('customer')
is-invalid
#enderror"
id="customer">
<option value="">-- Seleciona -</option>
#foreach($customers as $customer)
<option
value="{{ $customer->id }}"
{{ old('customer') == $customer->id ? 'selected' : '' }}>{{ $customer->customer_name }}</option>
#endforeach
</select>
#error('customer')
<span class="invalid-feedback d-block" role="alert">
<strong>{{$message}}</strong>
</span>
#enderror
</div>
<!-- End Laravel SELECT Element -->
<!-- Vue Component SELECT Element -->
<create-task-jobs v-bind:customers={{ json_encode($customers) }}>
</create-task-jobs>
<!-- End Vue Component SELECT Element -->
The Vue Component code:
<template>
<div>
<form #submit.prevent="agregar">
<h3>Afegir Tasques</h3>
<b-form-group id="input-group-3" label="Client" label-for="input-3">
<b-form-select
id="input-3"
v-model="form.customer"
:options="customers_load"
required
></b-form-select>
</b-form-group>
<button class="btn btn-primary" type="submit">Agregar</button>
</form>
</div>
</template>
<script>
export default {
props: {
customers: Array
},
data() {
return {
form: {
customer: null,
},
customers_load: [{ text: 'Select One', value: null },...this.customers]
}
}
}
</script>
The SELECT in Laravel works fine, show the customer_name and the id correctly but the problem is in the Vue Component the values of the SELECT are null:
The array into the component is null and I don't sure what is happen.
UPDATED:
Array object dd:
Thanks!

Answer 1

Try this one with little changes,
<create-task-jobs v-bind:customers={{ json_encode($customers->pluck('customer_name', 'id')) }}></create-task-jobs>
As it will not make key value pair. You will understand it by dd $customers