Получить значение из элемента документа в Vue.JS

Я создаю интерфейс для моего приложения SpringBoot. Для отправки запроса Get мне нужно получить значение из ввода в моей программе, но не имеют успеха.

Я пробовал использовать любого короля .value, valueOf(), .toString()методы после выбора document.getElementById("name")и не из них, кажется, работает.

// элемент

<form class="pt-3">
   <div class="form-group">
      <label for ="name">Person ID</label>
      <input
         type="text"
         id="name"
         class="form-control is"
         :class="{'is-invalid': $v.name.$error} "
         @input="$v.name.$touch()"
         v-model="name"
         placeholder="123456"
         value=""
      >
      <div class="invalid-feedback" v-if="!$v.name.minLength">ID must be at least 5 characters</div>
      <button class="btn btn-secondary btn-lg btn-block" @click="FetchData">Найти</button>
   </div>  
</form>

// функция

AddPerson: function () {
    var nperson = document.getElementById("name").valueOf().value.name;
    console.log(nperson);
}

Мне нужно вывести текст, который пользователь вводит в строку имени на странице, и опубликовать его в console.log().

/// Добавлен

data() {
  return {
    result: '',
    name: '',
    seats: '',
    reservation: ''
  }
}