Несколько методов в одном Vue.js

<template>
<div class = "ryte">
<br>
 <form @submit.prevent="submit">
  <div class="form-group" :class="{ 'form-group--error': $v.name.$error }">
    <label class="form__label">Name</label>
    <input class="form__input" v-model.trim="$v.name.$model"/>
  </div>
  <div class="error" v-if="!$v.name.required">Name is required</div>
  <div class="error" v-if="!$v.name.minLength">Name must have at least {{$v.name.$params.minLength.min}} letters.</div>
  <button class="button" type="submit" :disabled="submitStatus === 'PENDING'">Submit!</button>
  <p class="typo__p" v-if="submitStatus === 'OK'">Thanks for your submission!</p>
  <p class="typo__p" v-if="submitStatus === 'ERROR'">Please fill the form correctly.</p>
  <p class="typo__p" v-if="submitStatus === 'PENDING'">Sending...</p>
</form>
<label>
    Введите фамилию*:
    <input type = "text" id = "lastname" v-model = "lastname" placeholder = "Например, Иван"/>
    </label>
    <br>
    <br>
    <label>
    Введите имя*:
    <input type = "text" v-model = "firstname" placeholder = "Например, Иван"/>
    </label>
<br>
<br>
    <label>
    Введите отчество:
    <input type = "text" v-model = "secondname" placeholder = "Например, Васильевич"/>
    </label>
<br>
<br>
    <label>
    Введите дату рождения*:
    <input type = "date" v-model = "date" class="form-control"/>
    </label>
<br>
<br>
    <label>
    Введите номер телефона*:
    <input type = "phone"  value = "+7(   )"  maxlength = "16" />
    </label>
<br>
<br>
    <label>
    Пол:
    <input type = "text"  placeholder = "Например,Женский" v-model = "text"/>
    </label>
<br>
<br>
<div class = "app">
    Лечащий врач:
  <multiselect v-model="value1" :options="options2" :searchable="false" :close-on-select="false" :show-labels="false" placeholder="Pick a value"></multiselect>
  </div>
  <br>
    <div class = "app2">
   Группа клиентов:
   <multiselect v-model="value" tag-placeholder="Add this as new tag" placeholder="Search or add a tag" label="name" track-by="code" :options="options" :multiple="true" :taggable="true" @tag="addTag"></multiselect>
    </div>
    <br>
  <label>
    Не отправлять СМС:
    <input type="checkbox" id="checkbox" v-model="checked">
    <label for="checkbox">{{ checked }}</label>
  </label>
  <label><b><h2>Адрес</h2></b></label>
   <div>
    Тип документа*:
  <multiselect v-model="value2" :options="options1" :searchable="false" :close-on-select="false" :show-labels="false" placeholder="Pick a value"></multiselect>
  </div>
  <br>
    <label>
    Индекс:
    <input type = "int"  placeholder = "Например,112345" v-model = "int"/>
    </label>
    <br>
    <br>
    <label>
    Страна:
    <input type = "text"  placeholder = "Например,Россия" v-model = "text"/>
    </label>
    <br>
    <br>
    <label>
    Область:
    <input type = "text"  placeholder = "Например,Челябенская" v-model = "text"/>
    </label>
     <br>
    <br>
    <label>
    Город*:
    <input type = "text"  placeholder = "Например,Челябинск" v-model = "text"/>
    </label>
     <br>
    <br>
    <label>
    Улица:
    <input type = "text"  placeholder = "Например,Сельская" v-model = "text"/>
    </label>
    <br>
    <br>
    <label>
    Дом:
    <input type = "text"  placeholder = "Например,34a" v-model = "text"/>
    </label>
     <label><b><h2>Паспорт</h2></b></label>
     <label>
    Серия:
    <input type = "int"  placeholder = "Например,5763" v-model = "int"/>
    </label>
    <br>
    <br>
    <label>
    Номер:
    <input type = "int"  placeholder = "Например,475690" v-model = "int"/>
    </label>
    <br>
    <br>
    <label>
    Кем выдан:
    <input type = "text"  placeholder = "Например,МОУ по Московской области" v-model = "text"/>
    </label>
    <br>
    <br>
    <label>
    Дата выдачи*:
    <input type = "date"  placeholder = "Например,23.06.1996" v-model = "date"/>
    </label>
    <br>
    <h3><i>*Поле обязательное для заполнения</i></h3>
    <br>

    <button value = "Создать клиент"></button>
</div>
</template>
<script>
import Multiselect from 'vue-multiselect'
import { required, minLength } from 'vuelidate/lib/validators'
export default {
  components: {
    Multiselect
  },
  data () {
    return {
      name: '',
      age: 0,
      submitStatus: null,
      lastname:'',
      firstname: '',
      secondname: '',
      value1: '',
      value: [],
      value2: '',
      options2: ['Иванов', 'Захаров', 'Чернышева'],
      options1: ['Паспорт', 'Свидетельство о рождении', 'Вод. удостоверение'],
      options: [
        { name: 'VIP', code: 'VIP' },
        { name: 'Проблемные', code: 'Проблемные' },
        { name: 'ОМС', code: 'ОМС' }
      ]
    }
  },
  methods: {
    addTag (newTag) {
      const tag = {
        name: newTag,
        code: newTag.substring(0, 2) + Math.floor((Math.random() * 10000000))
      }
    
      this.options.push(tag)
      this.value.push(tag)
    }
    
  },
   validations: {
    name: {
      required,
      minLength: minLength(4)
    }
  },
  methods: {
    submit() {
      console.log('submit!')
      this.$v.$touch()
      if (this.$v.$invalid) {
        this.submitStatus = 'ERROR'
      } else {
        // do your submit logic here
        this.submitStatus = 'PENDING'
        setTimeout(() => {
          this.submitStatus = 'OK'
        }, 500)
      }
    }
  }
}


  


</script>

<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>