Vue form does not work properly. Need help to repair it

everybody.

I have a task to repair form submit. I am too weak at Vue so I need your help. I don’t know version, prob 2.
Just to be clear: form contains few parts, they combine throw npm.
registration form image

This is an example of modal window whre form exists.
Left input is text input. RIght input doesn’t work properly right now but it is a dropdown selector. Previously it was only one mail domain to register, but now employee wants to put a second variant and choose between them throughout registration process.
I did not write this code, my task is to make it send POST info to register user. It makes array consisting of login and domain. They must combine together to form registration email and login. Resulting array is correct but on submission it puts different information in POST array.

<template>
  <div class="popup__inner registration__form">
    <h3
      v-if="extraContent &&
        extraContent.items &&
        extraContent.items.regTitle"
      v-html="extraContent.items.regTitle"></h3>
    <template v-if="!isRegFormSubmitted">
      <p
        class="note"
        v-if="extraContent &&
          extraContent.items &&
          extraContent.items.regDescr"
        v-html="extraContent.items.regDescr"></p>
      <Form>
        <FormItem :errorText="isRegError">
          <InputText
            v-model="userInfo.login"
            type="text"
            name="registration-login"
            nameDomain="registration-domain"
            placeholder="Email"
            fieldModifier="login"
            @input="handleLoginInput"/>
        </FormItem>
        <FormItem itemModifier="btns">
          <ButtonComp
            color="bright"
            :disabled="isBtnDisabled"
            v-on="!isBtnDisabled ? { click: () => submitForm(userInfo) } : {}"
            v-html="texts.register"></ButtonComp>
        </FormItem>
      </Form>
    </template>
    <template v-else>
      <p class="note">
        <span
          v-if="extraContent &&
            extraContent.items &&
            extraContent.items.regComplete"
          v-html="extraContent.items.regComplete"></span> {{ loginCopy }}{{ domainCopy }}</p>
    </template>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

import ButtonComp from '~/components/global/button/ButtonComp'
import Form from '~/components/global/forms/form/Form'
import FormItem from '~/components/global/forms/form/FormItem'
import InputText from '~/components/global/forms/inputText/InputText'
import handleLoginInput from '~/mixins/handleLoginInput'

export default {
  mixins: [handleLoginInput],
  components: {
    ButtonComp,
    Form,
    FormItem,
    InputText
  },
  computed: {
    isBtnDisabled () {
      return !this.isLoginChanged;
    },
    ...mapGetters({
      extraContent: 'extra/extraContent',
      isRegFormSubmitted: 'authPopup/isRegFormSubmitted',
      isRegError: 'user/isRegError',
    })
  },
  data () {
    return {
      userInfo: {
        login: '',
        domain: ''
      },
      loginCopy: '',
      domainCopy: '',
      isLoginChanged: false,
      texts: {
        register: 'Register'
      }
    }
  },
  methods: {
    async submitForm() {
      this.loginCopy = this.userInfo.login;
      this.userInfo.domain = window.selectedDomain;
      this.domainCopy = this.userInfo.domain;
      this.registerUser().then(() => {
        this.userInfo.login = '';
        this.userInfo.domain = '';
      });
      if (!(!!this.isRegError)) {
        this.$store.commit('authPopup/SET_REGISTRATION_SUBMITTED_STATE', !this.isRegFormSubmitted);
        this.isLoginChanged = false;
      }
    },
    async registerUser () {
      await this.$store.dispatch('user/REGISTER_USER', this.userInfo.login, this.userInfo.domain);
    }
  }
}
</script>

<style>
.note {
  .accent-container {
    display: block;
    margin-top: 5px;
  }
  .accent {
    color: #c2125e;
  }
}
</style>

Here is a template called InputText, because it is formerly a template for just a text input for login. Someone added some form of a selector, but I am not sure about it’s work.

<template>
  <div
    class="form__field"
    :class="fieldModifier ? `form__field_${fieldModifier}` : ''">
    <input
      :type="type"
      :name="name"
      :value="value"
      :placeholder="placeholder"
      :disabled="disabled"
      @input="onInput"
      @change="onChange"
      @blur="onBlur"
      />
    <select v-model="domain"
      :class="'form__choose_domain'"
      :name="nameDomain"
      @change="onSelectDomain"
    >
      <option selected>@domain.com</option>
      <option>@second.domain.com</option>
    </select>
    <slot></slot>
  </div>
</template>

<script>
export default {
  props: {
    fieldModifier: {
      type: String
    },
    name: {
      type: String,
      default: 'text'
    },
    type: {
      type: String,
      default: ''
    },
    value: {
      type: [String, Number],
      default: ''
    },
    placeholder: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      domain: '@domain.com'
    }
  },
  methods: {
    // onInput (event) {
    //   this.$emit('input', event.target.value);
    // },
    onChange (event) {
      this.$emit('change', event.target.value);
    },
    onBlur (event) {
      this.$emit('blur', event.target.value);
    },
    onSelectDomain () {
      window.selectedDomain = this.domain
    }
  }
}
</script>

<style>
.form__field {
  position: relative;

  .form__choose_domain {
    display: none;
  }
  
  &_login {
    position: relative;
    width: 100%;

    .form__choose_domain {
      display: block;
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      border: none;
      outline-style:none !important;
      &:focus {
        outline: 0;
      }
    }

    &:before {
      content: '';
      width: 180px;
      height: 100%;
      position: absolute;
      background: $colorLight;
      height: calc(100% - 2px);
      margin: 1px 1px 1px 0;
      top: 0;
      right: 0;
      padding: 0.5rem 1rem 0.55rem;
      border-left: 1px solid #dddddd;
      border-radius: 0 3px 3px 0;
      font-size: responsive $mainTextFontSizeMin $mainTextFontSizeMax;
      font-range: $minScreenWidth $maxScreenWidth;
    }

  }
}

input[type="text"],
input[type="password"] {
  appearance: none;
  width: 100%;
  padding: 0.5rem 0.9rem 0.55rem;
  outline: none;
  border-radius: 3px;
  background: $colorLight;
  border: 1px solid #dddddd;
  font-size: responsive $mainTextFontSizeMin $mainTextFontSizeMax;
  font-range: $minScreenWidth $maxScreenWidth;
  font-family: 'Navigo Regular', Arial, sans-serif;

  &::placeholder {
    color: #ababab;
  }

  &:focus {
    border-color: $colorYellow;
  }

  .form__field_login & { 
    padding-right: 8.5rem;
  }
}
</style>

Need help ASAP. Thanks!