[Vuejs]-Problem in structuring a proper way to iterate data into html elements in vue

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      patientname: {
        "userid": null,
        "id": null,
        "patientname": null,
        "phone": null,
        "alternativephone": null,
        "gender": null
      },
      "patientnames": [{
          "userid": 1,
          "id": 1,
          "patientname": "Eadie",
          "phone": "8759800300",
          "alternativephone": "1092851519",
          "gender": "Female"
        },
        {
          "userid": 2,
          "id": 2,
          "patientname": "Banana",
          "phone": "8759800300",
          "alternativephone": "1092851519",
          "gender": "Female"
        },
        {
          "userid": 6,
          "id": 6,
          "patientname": "Alvera",
          "phone": "5352622059",
          "alternativephone": "5927226106",
          "gender": "Male"
        },
        {
          "userid": 7,
          "id": 7,
          "patientname": "Gavin",
          "phone": "1375015030",
          "alternativephone": "8917525333",
          "gender": "Male"
        },
        {
          "userid": 9,
          "id": 9,
          "patientname": "Haleigh",
          "phone": "4724336149",
          "alternativephone": "1954541209",
          "gender": "Male"
        },
        {
          "userid": 10,
          "id": 10,
          "patientname": "Eadmund",
          "phone": "5826216088",
          "alternativephone": "5209747561",
          "gender": "Female"
        }
      ]
    }
  }
})

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">

<div id="app">
  <v-app id="inspire">
    <div class="patient-info">
      <h4>Create Appointment</h4>

      <div class="patient-create-data-container">

        <v-autocomplete class="patient-patient" v-model="patientname" :items="patientnames" hide-no-data dense filled append-icon="" item-text="patientname" label="Patient Name" return-object></v-autocomplete>

        <v-text-field v-model="patientname.gender" show-current type="text" label="Gender"></v-text-field>
      </div>

      <div class="patient-phones">
        <v-autocomplete class="patient-patient" v-model="patientname" :items="patientnames" hide-no-data dense filled append-icon="" item-text="phone" label="Phone" return-object></v-autocomplete>

        <v-text-field v-model="patientname.alternativephone" dense filled hide-spin-buttons type="number" append-icon="" label="Alternative Phone"></v-text-field>
      </div>
    </div>
  </v-app>
</div>



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