How do I store data from v-form into the data prop?

Question

I am developing a login screen it currently looks like this:

I am using vue tabs and for the input I am using v-form boxes. I am generating these components with the following HTML:

<template>
<div>
  <div id="app">
  <v-app id="inspire">
    <v-card width="30%" class="mx-auto mt-5">
    <v-card-title width="100%">

     <v-tabs
      v-model="tab"
      fixed-tabs
    >
      <v-tab
        v-for="item in items"
        :key="item.tab"
      >
        {{ item.tab }}
      </v-tab>
    </v-tabs>

    <v-tabs-items v-model="tab">
      <v-tab-item
        v-for="item in items"
        :key="item.tab"
      >
        <v-card flat width="400px">
          <v-card-text>
            
            <v-form
            v-for="form in item.content.forms"
            :key="form.name"
            >

            <v-text-field
            :label=form.name
            :type=form.type
            :placeholder=form.placeholder
            :v-model=form.model
            >
            </v-text-field>

            </v-form>
          {{ message }} 

        <v-btn  elevation= "100" color= "blue" top :style="{left: '42%', transform:'translateX(-50%)'}" @click="buttonPressed(item.content.createAccount, item.content)">{{item.content.buttonText}}</v-btn>

          </v-card-text>
        </v-card>
      </v-tab-item>
    </v-tabs-items>
    </v-card-title> 
    </v-card>
  </v-app>
</div>
</div>
</template>

The card is generated via the HTML above which references this data() prop:

  data () {
      return {
        tab: null,
        items: [
          { 
            tab: 'Login', content: {
              forms: [
                {name: "Email", type:"text", placeholder: "Email", model: ""},
                {name: "Password", type: "password", placeholder: "Password", model: ""}
              ],
              buttonText: "Login",
              createAccount: false
          } },
          { 
            tab: 'Sign Up', content: {
              forms: [
                {name: "Display Name", type: "text", placeholder: "Display Name", model: ""},
                {name: "Email", type:"text", placeholder: "Email", model: ""},
                {name: "Password", type: "password", placeholder: "Password", model: ""}
              ],
              buttonText: "SignUp",
              createAccount: true
          } }
        ],
      }
    }

My problem is specifically related (probably) to how the individual v-forms are storing the data within them. To store data I have attached each v-text-field via v-model prop in this line of code in the HTML section above:

    :v-model=form.model

The problem I am having is that when I log the values to the debug window via this function in the script section of my file (the related interface is included for convenience):

interface DataFormat{
  forms : [
    {
      name: string,
      model: string
    }
  ]
}

  buttonPressed(createAccount: boolean, formList: DataFormat): void {
    if(createAccount){
      //SignUp
      for(let form in formList.forms){
        console.log(formList.forms[form].name + ": " + formList.forms[form].model);
      }
    }else{
      //Login
      for(let form in formList.forms){
        console.log(form);
      }
    }
  }

I get nothing but empty strings (for now I am only properly testing the sign up button). You can see in the top right corner the output from my console.logs in the buttonPressed function after hitting the button with the values "asd" in each field.

If you need access to more of my code to answer this question the github for this project is the following:

Github repo for my chat application (not currently using Socket_IO)

Answer 1

I just had to use v-model instead of:v-model

lol.