When I have a value binded, if I reset the value the component isn't updated

[fshahmt]

<autocomplete :search="searchArea" required placeholder="Search and select" aria-label="Search and select" class="hard-skills" :get-result-value="getResultValue" @submit="setSecondaryAreaForUser" v-bind:default-value="userDetails.secondaryArea" ></autocomplete>

This is the markup for the code.

When I select a new value in the other select (this one is basically a dependant), I reset the userDetails.secondaryArea value to null but it still has the old value.

This is definitely not the expected behaviour.

<div class="form-group text-left" @change="reset('institution')"> <label>Your educational institution? *</label> <select class="form-control text-secondary" v-model="userDetails.institution" @change="getCurrentUniversityData()" required > <option value="null" disabled v-if="universities.universities.length !== 1" > Select from list </option> <option v-for="(institute, index) in universities.universities" :key="index" :value="{ uid: institute.id, id: institute.university_id, name: institute.university_name, }" > {{ institute.university_name }} </option> </select> </div> <div class="form-group text-left" > <label>Your study degree *</label> <autocomplete :search="searchArea" required placeholder="Search and select" aria-label="Search and select" class="hard-skills" :get-result-value="getResultValue" @submit="setAreaForUser" v-bind:default-value="userDetails.area" ></autocomplete> </div>

This is the minimal code you can test it with, just add whatever script long as you get the same results

[KonRatt]

The default-value prop is not reactive and is only used during creation. One hacky way would be to force the recreation of the component by using Vues key attribute.

<autocomplete
    :key="userDetails.secondaryArea"
    :search="searchArea"
    :get-result-value="getResultValue"
    @submit="setSecondaryAreaForUser"
    :default-value="userDetails.secondaryArea"
/>