How to save user input data in vue

hello iam creating a website for saved recipes but since this is my first time iam stuck on how to modify user input data, what iam trying to achieve is when a user adds a new recipe a card with the data input by the user be added to the home page and if you created on the added card it will take you to the card with the datas input in

<template>
  <div class="container">
    <v-text-field
      class="mx-1 my-1"
      label=" food name"
        color="black"
        outlined 
        v-model="data . title"
    ></v-text-field> 
   
    <v-timeline :dense=" $vuetify . breakpoint . s m And   Down">
      <v-timeline-item
        color="purple lighten-2"
        fill-dot
        right
      >
        <v-card>
          <v-card-title class="purple lighten-2">
            <h2 class="display-1 white--text font-weight-light">Step 1</h2>
          </v-card-title>
          <v-container>
            <v-row>
              <v-col cols="12" md="10">
                <v-text area                   
                  auto-grow 
                  rows="4"
                  row-height="20"
                  shaped
                  v-model="data.one"
                ></v-text area>
              </v-col>
            </v-row>
          </v-container>
        </v-card>
      </v-timeline-item>

      <v-timeline-item
        color="amber lighten-1"
        fill-dot
        left
        small
      >
        <v-card>
          <v-card-title class="amber lighten-1 justify-end">
            <h2 class="display-1 mr-4 white--text font-weight-light">Step 2</h2>
          </v-card-title>
          <v-container>
            <v-row>
              <v-col cols="12" md="8">
                <v-text area
                  auto-grow
                  rows="4"
                  row-height="20"
                  shaped
                  v-model="data. two"
                ></v-text area> 
              </v-col>
            </v-row>
          </v-container>
        </v-card>
      </v-timeline-item>

      <v-timeline-item
        color="cyan lighten-1"
        fill-dot
        right
      >
        <v-card>
          <v-card-title class="cyan lighten-1">
            <h2 class="display-1 white--text font-weight-light">Step 3</h2>
          </v-card-title>
          <v-container>
            <v-row>
              <v-col >
                <v-text area
                  auto-grow
                  rows="4"
                  row-height="20"
                  shaped
                  v-model="data .three"
                ></v-text area>
              </v-col>
            </v-row>
          </v-container>
        </v-card>
      </v-timeline-item>

      <v-timeline-item
        color="red lighten-1"
        fill-dot
        left
        small
      >
        <v-card>
          <v-card-title class="red lighten-1 justify-end">
            <h2 class="display-1 mr-4 white--text font-weight-light">Step 4</h2>
          </v-card-title>
          <v-container>
            <v-row>
              <v-col cols="12" md="10">
                <v-text area
                  auto-grow
                  rows="4"
                  row-height="20"
                  shaped
                  v-model="data .four"
                ></v-text area>
              </v-col>
            </v-row>
          </v-container>
        </v-card>
      </v-timeline-item>
    </v-timeline>
    <v-layout row wrap>
      <v-flex mx-3 >
        <v-b t n block color="secondary" dark @click=" saved recipe">Save</v-b t n>

      </v-flex>
    </v-layout>
  </div>
</template> 

<script>
export default {
  data (){
    return{
      data: {
        title:'',
        one: '',
        two: '',
        three: '',
        four: '',
      }
    },
   
       methods: {
   savedrecp(){
 let savedrecp = this.data
 this.$store.commit('newrecp', savedrecp)
 this.$router.push({ path:'/' }) 
}},
          
}
</script> 

<script>
export default {
  data (){
    return{         
      data: {
        title: '',
        one: '',
        two: '',
        three: '',
        four: ''
      },
    }
  },
  computed: {
    item(){
      return this. $store.getters.data
    }
  },

  mounted() {
    console.log(this. data);
  },
}
</script>

<template>
  <div class="home">
    <v-container grid-list-xs>
      <v-btn bottom fixed to="/new" > Click to add new Recipes
        <v-icon>fas fa-home</v-icon>
      </v-btn>

      <v-layout row wrap>
         <v-flex xs12 x13 lg12 v-for="(item, index) in data" :key="index">
           <v-card 
 
           >

           <v-list-item three-line>
             <v-list-item-content>
                <div class="overline mb-4">Recipe </div>
                <h1>{{item.title}}</h1>
                <v-list-item-title class="headline mb-1">pizza</v-list-item-title>
                <v-list-item-subtitle >Greyhound divisely hello coldly fonwderfully</v-list-item-subtitle>
              </v-list-item-content>
            </v-list-item>

            <v-card-actions>
              <v-btn  class="button3" text>remove</v-btn>
              <v-btn class="button1" text :to="'/savedrecp/'+item.title">open</v-btn>
            </v-card-actions>
          </v-card>
        </v-flex>
      </v-layout>
    </v-container>
  </div>
</template>

<script>