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"

`

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')">

Your educational institution? *

      <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"
/>