VueJS Duplicate components all updating at the same time

Question

Might be a simple solution, but I'm currently not seeing it. I have an object that describes several configurations.

Object looks like this:

export const fieldSelectionDefault = {
  cohort: { 
    currency_key: null, 
    salary_key: null, 
    timeframe_key: null 
  },
  school: {
    currency_key: null,
    salary_key: null,
    timeframe_key: null,
    response_count_key: null,
  },
}

export const cohortListFieldDefault = {
  field_student: { ...fieldSelectionDefault },
  field_alum_1: { ...fieldSelectionDefault },
  field_alum_2: { ...fieldSelectionDefault },
  field_alum_3: { ...fieldSelectionDefault },
}

Now, I have a parent component where I have a form. This form will list each field_* to have a <CohortFieldConfig /> component where we can input the values of the fieldSelectionDefault.

In the parent form, I add them like this:

    <h5>Student</h5>
    <CohortFieldConfig
      :key="'settings.field_student'"
      :disabled="settings.active_entities.student"
      :selection-fields="settings.field_student"
      @update-fields="(val) => test(val, 'stu')"
    />

    <h5>Alumnus 1</h5>
    <CohortFieldConfig
      :key="'settings.field_alum_1'"
      :disabled="settings.active_entities.alum_1"
      :selection-fields="settings.field_alum_1"
      @update-fields="(val) => test(val, 'alum')"
    />

CohortFieldConfig looks like this (example of one inputs, removed js imports):

<template>
  <div>
    <a-form-item label="Currency input">
      <a-input
        :disabled="!disabled"
        placeholder="Select a currency form key"
        v-model="objSelectionFields.cohort.currency_key"
      />
    </a-form-item>
    <FieldSelector
      @select="val => (objSelectionFields.cohort.currency_key = val)"
      :user="user"
      :disabled="!disabled"
    />
  </div>
</template>

<script>
export default {
  name: 'CohortFieldConfig',
  components: { FieldSelector },
  props: {
    selectionFields: {
      type: [Object, null],
      default: () => {
        return { ...fieldSelectionDefault }
      },
    },
    disabled: {
      type: Boolean,
      default: () => false,
    },
  },
  data: function() {
    return {
      fieldSelectionDefault,
      objSelectionFields: { ...this.selectionFields },
    }
  },
  watch: {
    objSelectionFields: {
      handler(){
        this.$emit('update-fields', this.objSelectionFields)
      },
      deep: true
    }
  },
  methods: {
    update() {
      // not really used atm
      this.$emit('update-fields', this.objSelectionFields)
    },
  },
}
</script>

When you type in the input, BOTH are updated at the same time. For student & alum_1. The update-fields event is fired for both (same) components

Whats the reason? I've tried setting different key, doesn't work.

UPDATE

As pointed out in the comments, the issue was I was giving the same object. To correct this, I make a (deep) copy of the object as so:

export const cohortListFieldDefault = {
  field_student: JSON.parse(JSON.stringify(fieldSelectionDefault)),
  field_alum_1: JSON.parse(JSON.stringify(fieldSelectionDefault)),
  field_alum_2: JSON.parse(JSON.stringify(fieldSelectionDefault)),
  field_alum_3: JSON.parse(JSON.stringify(fieldSelectionDefault)),
}