this.$refs.///.value не получает данные из инпутов и селектов

пытаюсь получить измененные данные используя реф, на этапе const enteredAge = this.$refs.age.value данные уже не приходят

<template>
  <header class="flex">
    <a class="logo" href="#">
      <b>Kinder</b>
    </a>
    <nav class="header-nav">
      <div class="header-btns">
        <ul class="navbar ul flex">
          <li>
            <a href="#">{{ name }}</a>
          </li>
          <li>
            <router-link to="/user">Назад</router-link>
          </li>
        </ul>
      </div>
    </nav>
  </header>
  <main>
    <div v-for="post in post" :key="post">
      <h1>Редактирование анкеты</h1>
      <div id="wrapper">
        <form id="signin" action="#" @submit.prevent="submitHandler">
          <input
              class="input"
              id="name"
              name="name"
              v-model="post[0]"
              required
              type="number"
              min="18"
              max="99"
              ref="age"
              placeholder="Возраст"/>
          <select class="select" v-model="post[1]" ref="pol">
            <option disabled selected>Укажите пол</option>
            <option>Женщина</option>
            <option>Мужчина</option>
          </select>
          <select class="select" v-model="post[3]" ref="tar">
            <option disabled selected>Укажите цель знакомства</option>
            <option>Дружба</option>
            <option>Отношения</option>
            <option>Общение</option>
          </select>
          <textarea class="input aboutme" v-model="post[2]" ref="about" placeholder="Расскажите о себе..." name="" id="" cols="30" rows="10"></textarea>
          <div class="wrap">
            <button class="button" @click="editUserPost">Сохранить изменения</button>
          </div>
          <div class="wrap">
            <button class="button" @click="deleteUserPost">Удалить анкету</button>
          </div>
        </form>
      </div>
    </div>
  </main>
</template>
<script>
export default {
  beforeMount() {
    this.$store.dispatch('fetchUserPost')
  },
  mounted() {
    this.$store.dispatch('fetchInformationUser')

  },
  computed: {
    post () {
      return this.$store.getters.post
    },
    name() {
      return this.$store.getters.info.name
    },
  },
  methods: {
    async editUserPost(){
      const enteredAge = this.$refs.age.value
      const enteredPol = this.$refs.pol.value
      const enteredTar = this.$refs.tar.value
      const enteredAbout = this.$refs.about.value
      const formData = {
        name: this.name,
        age: enteredAge,
        pol: enteredPol,
        tar: enteredTar,
        about: enteredAbout,
        key: this.id
      }
      await this.$store.dispatch("editUserPost", formData)
      await this.$router.push('/user')
    },
    deleteUserPost(){
      this.$store.dispatch('deleteUserPost')
      this.$router.push('/user')
    }

  }
}
</script>