Why isn't a default value being set on my v-autocomplete component?

Question

I'm trying to set the default value of a v-autocomplete component by adding values to the associated v-model. The value is not being set.

I have an array of dates for a week. A v-autocomplete component gets rendered for each day of the week with the following code:

<div v-for="(date, index) in datesOfWeek" :key="index">
    <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg mb-4">
        <div class="p-6">
            <div class="text-h5">{{date}}</div>
            <form @submit.prevent="" class="mt-6 space-y-6">
                <v-autocomplete
                    label="What sounds good?"
                    :items="meals"
                    item-title="meal.title"
                    item-value="meal.id"
                    return-object
                    v-model="selectedMeal[index]"
                    @update:modelValue="submitForm"
                ></v-autocomplete>
                <v-text-field type="hidden" :value="index" v-model="form.date" />
            </form>
        </div>
    </div>
</div>

I'm passing in the meals for the week from a prop and assigning it the value of the selectedMeal constant via the onMounted() event hook.

onMounted((selectedMeal)=>{
    selectedMeal = props.table_meals;
    console.log(selectedMeal);
});

This is what the selectedMeal object looks like when it gets the props from the backend:

This is what the model of the autocomplete component looks like after the user has submitted it:

The structure of the objects look the same to me. Why isn't the component using the default values that are being passed to it?

Answer 1

Okay...I solved it. Honestly think I was doing too much, looking at too much and not thinking clearly.

For someone reason I was trying to set the value of the model in the onCreated hook. I simply defined it in a constant and voila.

const selectedMeal = props.table_meals;