I am using the Vuetify color picker to change the background and text colors of my elements. Currently, I am storing the hex color values in Firestore. Using @input="updateColor" as an attribute on the v-color-picker I am calling the function to store the value in Firestore.

The problem is that @input gets called every time the mouse is moved when selecting a color. Because of this, my code is making a lot of update calls to Firestore. For example, when sliding from white to black in the color picker it makes around 100 calls to the function.

This is my code:

v-color-picker HTML:

<v-color-picker
    dot-size="25"
    mode="hexa"
    v-model="background.color"
    @input="updateColor"
></v-color-picker>

updateColor function:

const updateColor = () => {
    const data = {
        backgroundColor: background.value.color,
        textColor: text.value.color
    }

    console.log("Update");

    // Storing the data in firestore
    currentPage.updateComponent(props.component.uid, data)
    .catch((error) => {
        app.setError(error)
    });
}

When looking at the v-color-picker-api there are 3 events (input, update:color, update:mode). I have tried the @update:color event but it produces the same result. And @update:mode is not used for selecting colors.

Ideally I do not want to use a button to apply the color.

I am using Vue 2 with the composition API. How can I make fewer calls to Firestore?