NuxtJS (VueJS) v-model issues

I have a parent component calling the textInput component:

<template>
  <TextInput
  v-model.lazy="fields.title"
  container-text="Hero Title"
  mobile-container-text="Hero Title Mobile"
  :mobile-text="fields.mobileTitle"
  inline="true" />
</template>

<script>
import TextInput from "@/components/core/inputs/TextInput"
import { libComponentMixin } from "@/shared/mixins"

export default {
  name: "test",
  components: {
    TextInput
  },
  mixins: [libComponentMixin],
  data: function () {
    return {
      fields: {
        title: "Hero Headline",
        mobileTitle: "Hero Headline Mobile"
      }
    }
  }
}
</script>

And within the TextInput component I have the following:

<template>
  <span
    v-if="$store.state.editMode && !$store.state.previewMode"
    class="edit"
    :class="{
      selected: $store.state.editingId === id,
    }"
  >
    <span @click="onShowControls" v-html="parsedValue"></span>
    <portal v-if="$store.state.editingId === id" to="controls">
      <div class="white-area">
        <h2>{{ containerText ? `${containerText}` : "Textarea" }}</h2>
        <slot></slot>
        <VueEditor
          ref="quillEditor"
          v-model="editorValue"
          :editor-options="editorSettings"
        />
      </div>
      <div v-if="mobileText">
        <h2>{{ mobileContainerText ? `${mobileContainerText}` : "Textarea" }}</h2>
        <slot></slot>
        <VueEditor
          ref="quillEditor"
          v-model="mobileText"
          :editor-options="editorSettings"
        />
      </div>
    </portal>
  </span>
  <span v-else v-html="parsedValue"></span>
</template>

<script>
import { VueEditor } from "vue2-editor"
import { debounce } from "lodash"
import { getUID } from "@/shared/utils"

export default {
  name: "TextInput",
  components: {
    VueEditor,
  },
  props: [
    "value",
    "itemIndex",
    "inline",
    "linkStyle",
    "supStyle",
    "containerText",
    "miniMode",
    "staticText",
    "mobileText",
    "mobileContainerText"
  ],
  data() {
    return {
      id: getUID(),
      editorSettings: {
        modules: {
          toolbar: !this.miniMode ? customToolbarConfig : false,
        },
      },
    }
  },
  computed: {
    editorValue: {
      get() {
        return this.itemIndex !== undefined
          ? this.value[this.itemIndex].text
          : this.value
      },
      set: debounce(function (newValue) {
        if (this.itemIndex !== undefined) {
          this.$emit(
            "input",
            this.value.map((item, i) =>
              this.itemIndex === i ? { ...item, text: newValue } : item
            )
          )
        } else {
          this.$emit("input", newValue)
        }
      }, 400),
    },
    editorValueMobile: {
      get() {
        return this.itemIndex !== undefined
          ? this.value[this.itemIndex].text
          : this.value
      },
      set: debounce(function (newValue) {
        if (this.itemIndex !== undefined) {
          this.$emit(
            "input",
            this.value.map((item, i) =>
              this.itemIndex === i ? { ...item, text: newValue } : item
            )
          )
        } else {
          this.$emit("input", newValue)
        }
      }, 400),
    }
  },
  methods: {
    insertMarkup(markup) {
      const quill = this.$refs.quillEditor.quill
      const pos = quill.getSelection(true).index
      this.$refs.quillEditor.quill.clipboard.dangerouslyPasteHTML(pos, markup)
    },
    onShowControls() {
      this.$store.commit("setEditingId", this.id)
    },
  },
}
</script>

<style lang="scss" scoped>
.edit {
  display: inline-block;
  border: 3px dashed transparent;
  &:hover {
    border: 3px dashed $button-secondary;
  }
  &.selected {
    border: 3px dashed $red;
  }
}
</style>

I am trying to update the mobileText data and have that show on the parent component. I think my problem is in the editorValueMobile method inside the computed object. Any help would be great thanks