Mounted:

mounted() {
    this.$fire.firestore
      .collection("blueprints")
      .doc(this.id)
      .get()
      .then((snapshot) => {
        this.blueprint = snapshot.data();
      })
      .catch((err) => {
        console.log(err, "Error here.");
      });
  },

Created:

created() {
  this.updateBlueprint = _.debounce(this.updateBlueprint, 2000);
},

Method:

async updateBlueprint() {
      await this.$fire.firestore
        .collection("blueprints")
        .doc(this.id)
        .update(this.blueprint)
        .then((res) => {
          // Success
        })
        .catch((err) => {
          console.error("Error updating: ", err);
        });
    },

Template:

...
<Textarea
  v-model="blueprint.description"
  @input="updateBlueprint"
/>
...

Component:

<template>
  <div class="textarea">
    <textarea
      v-model="currentValue"
      v-bind="$attrs"
      ref="input"
      v-autogrow
    />
  </div>
</template>

Any idea on why there's such a lag? It's fine for the first couple minutes as I type, but the more I type and the more data I add, the slower and slower it types. At some points, Chrome has asked me if I want to kill the page or wait until its ready. Not sure what's causing the problem here, any suggestions? This is on my local server.

Update: I did discover that when running update, when I type into the textarea, it updates the entire array instead of individual parts of the array. My data is set up like this:

{
title: '...',
description: '...',
track: [
  {
    title: '...',
    description: '...'
  },
  {
    title: '...',
    description: '...'
  },
  {
    title: '...',
    description: '...'
  },
  {
    title: '...',
    description: '...'
  },
  {
    title: '...',
    description: '...'
  }
]

Instead of updating individual items in the track array, its updating the entire track array, could that be causing the lag?