Pass prop to child component with v-model

I have implemented a custom component (InvoiceTypeAndCustomerInfo) that utilizes a VAutocomplete element. The selected customer is passed to the component via props.

However, I am encountering an issue where the VAutocomplete does not pre-select the customer that is passed through the props when the page is initially loaded. Instead, it appears as if no customer is selected by default, even though the customer prop is correctly passed to the VAutocomplete.

Script in InvoiceTypeAndCustomerInfo:

const props = defineProps({
  invoiceType: {
    type: Number,
    required: true,
  },
  customer: {
    type: Object,
    required: true,
  },
})

const customer = ref({ id: 0, fullname: '' })
const customers = ref([{ id: 1, fullname: 'Customer 1' }, { id: 2, fullname: 'Customer 2' }])

Template (AppAutocomplete is the renamed VAutocomplete):

<AppAutocomplete
    v-model="customer"
    :items="customers"
    item-title="fullname"
    item-value="id"
    return-object
    placeholder="Select Customer"
    class="mb-6"
    density="compact"
>

The parent uses InvoiceTypeAndCustomerInfo like this:

    <InvoiceTypeAndCustomerInfo 
      :customer="customer"
      :invoice-type="invoiceType" 
      @customer-changed="customerChanged"
    />

where customer is defined like this:

const customer = ref({ id: 2, fullname: 'Customer 2' })

Why doesn't the VAutocomplete component display the customer tfrom the props?

Looks like you are using customer twice, once as ref and once as prop. The autocomplete uses the ref, where lastname is empty - so there actually is a value selected, it just has no label to display.

Instead, you can use the prop directly. Just remove the ref and v-model from the AppAutocomplete, and wire it to work with the customer prop:

const props = defineProps(['customer'])
const emit = defineEmits(['update:customer'])

and in the template:

<AppAutocomplete
    :modelValue="customer"
    @update:modelValue="emit('update:customer', $event)"
    ...
>

Now you can do <InvoiceTypeAndCustomerInfo v-model:customer="yourCustomer"/>

Alternatively, you can rename the ref and use a watcher to copy the prop value to the internal ref. This depends on how you want to use the component, particularly how you emit the update event, which is not specified in the question. But in any way, you will use watcher like:

const selectedCustomer = ref()
watch(
  () => props.customer,
  () => selectedCustomer.value = props.customer,
  {immediate: true}
)

and

<AppAutocomplete
  v-model="selectedCustomer"
  ...

Now any update to customer on InvoiceTypeAndCustomerInfo will update the selected value.

Hope it helps