Depositor-Form

HTML

<script src="https://unpkg.com/vuelidate@0.7.5/dist/vuelidate.min.js"></script>
<script src="https://unpkg.com/vuelidate@0.7.5/dist/validators.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id='app'>
  <div class="depositor-form">
    <h1 class="depositor-form-headline">Add New Depositor</h1>
    <form class="depositor-form-body">
      <div class="form-group row depositor-name">
        <label class="col-3">Name</label>
        <input class="xfin-form-control" type="text" @blur="$v.updatedDepositor.name.$touch()" v-model="$v.updatedDepositor.name.$model" :class="{'has-errors': $v.updatedDepositor.name.$error }" />
        <span class="errors-output offset-3" v-if="$v.updatedDepositor.name.$error">Please provide a valid name!</span>
        <div class="vuelidate-output">{{ $v.updatedDepositor.name }}</div>
      </div>
      <div class="depositor-accounts">
        <div class="depositor-accounts-heading">
          <hr />
          <h2 class="depositor-accounts-headline">Accounts</h2>
        </div>
        <div class="form-group row depositor-account-selection xfin-form-group-select">
          <label class="col-3">Account</label>
          <select class="xfin-form-control" :disabled="updatedDepositor.accounts.length == 0 || pendingAccountCreation" v-model="selectedAccountIndex" @change="loadAccountFields">
            <option v-for="(account, index) in updatedDepositor.accounts" :key="index" :value="index" :visible="!pendingAccountCreation">{{ account.accountNumber }}</option>
            <option value="-1" v-if="pendingAccountCreation">(New Account)</option>
          </select>
          <button class="btn btn-primary add-account-btn" @click.prevent="draftAccount" v-if="!pendingAccountCreation">+</button>
...

SCSS

html {
  font-size: 10px;
}

.depositor-form {
  font-size: 2rem;
  margin-left: 3rem;
  margin-top: 3rem;

  .depositor-form-body {
    width: 75%;

    .form-group {
	  label span {
	  	display: block;
	  	font-size: 1rem;
	  }
	  
	  input {
        border: 1px solid #767676;
        border-radius: 0.5rem;

        &.has-errors {
          border: 1px solid #f04124;
          outline: none;
        }
      }

      .errors-output {
        color: #f04124;
        font-size: 1.4rem;
        margin-top: 1rem;
      }
	  
	  .vuelidate-output {
	  	font-size: 1.4rem;
	  }
    }

    .depositor-accounts {
      position: relative;

      .depositor-accounts-heading {
        position: relative;
        margin: 6rem 0;

        .depositor-accounts-headline {
          background-color: #fff;
          left: 5%;
          letter-spacing: 0.3rem;
          padding: 0 1rem;
          position: absolute;
          text-transform: uppercase;
          top: -1.25rem;
        }
      }
    }
  }
}

JavaScript

Vue.use(window.vuelidate.default)
const {
  required,
  helpers
} = window.validators
const accountNumberValidator = helpers.regex('accountNumberValidator', /^[0-9]+$/);
const ibanValidator = helpers.regex('ibanValidator', /^[0-9]+$/);
const bicValidator = helpers.regex('bicValidator', /^[0-9]+$/);

new Vue({
  el: '#app',
  data: {
    pendingAccountCreation: false,
    selectedAccountIndex: 0,
    selectedAccount: null, //{}, //cant this be null?
    selectedAccountBeforeChange: null, //{}, //cant this be null?
    updatedAccount: {
      id: "",
      accountNumber: "",
      iban: "",
      bic: "",
      accountDescription: "",
    },
    updatedDepositor: {
      id: "",
      name: "",
      accounts: [],
    }
  },
  methods: {
    cloneArray(sourceArray) {
      let copiedArray = [];

      sourceArray.forEach((el) => {
        if (Array.isArray(el)) {
          let copiedChildArray = this.cloneArray(el);
          copiedArray.push(copiedChildArray);
        } else if (typeof el === "object") {
          let copiedObject = this.cloneObject(el);
          copiedArray.push(copiedObject);
        } else {
          copiedArray.push(el);
        }
      });

      return copiedArray;
    },

    cloneObject(sourceObject) {
      let copy = {};

      if (Array.isArray(sourceObject)) {
        copy = this.cloneArray(sourceObject);
      } else if (typeof sourceObject === "object") {
        let sourceProps = Object.keys(sourceObject);

        sourceProps.forEach((prop) => {
          if (Array.isArray(sourceObject[prop])) {
            copy[prop] = this.cloneArray(sourceObject[prop]);
          } else if (typeof sourceObject[prop] === "object") {
            copy[prop] = this.cloneObject(sourceObject[prop]);
          } else {
            copy[prop] = sourceObject[prop];
          }
        });

        return copy;
      }
    },

    cloneObjectModel(sourceObject) {
      let modelCopy = {};

      if (!Array.isArray(sourceObject)) {
        let...