Vuetify Combobox not updating to correct value

Question

I have a Vuetify combobox that on save does an api call to store the selected or entered value. However, when updating this value, if the save button is clicked directly without deselecting the combobox, the previously stored value is stored again, instead of the new value. Only when I manually unselect the box or press enter does the correct value store. I have looked around and found certain fixes that have worked for others, such as .blur() and .$nextTick, but they haven't seemed to work for me (I could be implementing them incorrectly). Here's what I have:

Combobox:

<v-combobox
  :items="suggestions"
  v-model="editedItem.field_label"
  label="Label"
  outlined
  dense
  ref = "comboBox"
></v-combobox>

Save button:

<v-btn color="blue darken-1" text @click="save"> Save</v-btn>

Save function:

save() {
  this.$refs.comboBox.$emit("blur")
  this.$nextTick(() => {
    const device_field = {
      ...this.editedItem,
    };
      device_field_api
        .updateDeviceField(device_field, this.device_id)
        .then((r) => {
          //Various logging items
          );
        })
        .finally(this.initialize())
        .catch((e) => {
          //Error catching
          );
        });
    });
  }

Answer 1

Change this.$refs.comboBox.$emit("blur") to this: this.$refs.comboBox.blur().

Codepen example

Result: