VueJS мутирует дубликат v-модели (: value, @input)

У меня проблема с использованием v-модели в моем собственном компоненте. А именно, я не хочу использовать State или Bus. В настоящее время компонент правильно возвращает единственное значение в App.js, он дублирует себя. Я не могу с этим справиться, пожалуйста, помогите и объясните мне проблему.

Большое спасибо!

App.js:

<template>
  <b-container>
    <SectionSelector :AddSection = "AddSection"/>
      <component 
          v-for = "(section, index) in sections"
          :key = "index"
          :is = "section.type"
          :sectionIndex = "index"
          :sectionData = "section[index]"
          @sectionDataEmit = "sectionDataEmit"/>
  </b-container>
</template>

<script>
  import SectionSelector from './components/SectionSelector.vue';
  import FullText from './components/sections/FullText.vue';
  import FullImage from './components/sections/FullImage.vue';
  import ImageRightTextLeft from './components/sections/ImageRightTextLeft.vue';
  import ImageLeftTextRight from './components/sections/ImageLeftTextRight.vue';

  export default {
    data() {
      return {
        sections: []
      }
    },
    methods: {
      AddSection(sectionData) {
        this.sections.push(sectionData);
      },
      updateSection(sectionIndex, sectionData) {
        this.sections[sectionIndex] = sectionData;
      },
      sectionDataEmit(emitData) {
        // eslint-disable-next-line
        console.info(emitData.position, emitData.content);
        this.sections[emitData.position].fields.text = emitData.content;
      }
    },
    components: {
      SectionSelector,
      FullText,
      FullImage,
      ImageRightTextLeft,
      ImageLeftTextRight
    }
  }
</script>

SectionSelector.vue:

<template>
  <b-row>
        <b-dropdown id = "dropdown-1" text = "Select" class = "m-md-2">
          <b-dropdown-item v-for = "(section, index) in sections"
                          :key = "index"
                          @click = "PushSection(index)"> {{ section.type }} </b-dropdown-item>
        </b-dropdown>
    </b-row>
</template>

<script>
  export default {
    props: ['AddSection'],
    data() {
      return {
        sections: [
          { 
            type: 'FullText',
            fields: {
              text: ''
            }
          },
          { 
            type: 'FullImage',
            fields: {
              url:''
            }
          },
          { 
            type: 'ImageRightTextLeft',
            fields: {
              img: '',
              text: ''
            }
          },
          { 
            type: 'ImageLeftTextRight',
            fields: {
              img: '',
              text: ''
            }
          }
        ]
      }
    },
    methods: {
      PushSection(index) {
        this.AddSection(this.sections[index])
      }
    }
  }
</script>

FullText.vue:

<template>
  <b-row>
    <h3>Full text {{ sectionIndex+1 }}</h3>
    <b-textarea
    :value = "sectionData" 
    @input = "sectionDataEmit"></b-textarea>
  </b-row>
</template>

<script>
  export default {
    props: ['sectionIndex', 'sectionData'],
    methods: {
      sectionDataEmit(value) {
        let emitData = {
          position: this.sectionIndex,
          content: value
        }
        this.$emit('sectionDataEmit', emitData)
      }
    }
  }
</script>

В настоящее время код вызывает дублирование section.fields.text (видно в расширении Vue для Chrome).