how to save user input data in vue - vue.js

Question

I am creating my first website with Vue so I am creating a website for saving recipes I have a home page where you click to add new recipes and it takes you to a page where you can write your recipes and it will save on the home page kind of like a ( to do list ), so I am having troubles with saving the data that the user inputs. how can I get back the saved data from getters? ps. I know this is very simple but I am new to Vue
here are my codes (newrecp page) :
<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="addnew">Save</v-b t n>
</v-flex>
</v-layout>
</div>
</template>
<script>
export default {
data (){
return{
data: {
title:'',
one: '',
two: '',
three: '',
four: '',
}
},
methods: {
addnew(){
let savedrecp = this.data
this.$store.commit('newrecp', savedrecp)
this.$router.push({ path:'/' })
}},
}
</script>
In my store:
state: {
data : [],
},
mutations: {
newrecp(state, data) {
// mutate state
state. data .push(data)
}
},
getters: {
data(s){
return s .data
},
}
Script for my saved recipe page:
<script>
export default {
data (){
return{
data: {
title: '',
one: '',
two: '',
three: '',
four: ''
},
}
},
computed: {
item(){
return this. $store.getters.data
}
},
mounted() {
console.log(this. data);
},
}
</script>
Home page:
<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>

Answer 1

In general we use two-way bindings on form input, textarea, and select elements inorder to save input data you can read official document here.
regarding you'r code i don't see any problems in it unless there is something that you haven't shared right now you must be able to use you'r data like this:
savedRecipe() {
console.log(this.data) // => you can check you'r data in console.
}
UPDATE
You are trying to modify the vuex state from the vue component, You can not do it. You can only modify vuex store from a mutation.
In you'r store:
mutations: {
addRecipe(state, recipe) {
// mutate state
state.data.push(recipe)
}
and commit to mutation:
savedrecp(){
let savedrecp = this.data
this.$store.commit('addRecipe', savedrecp)
this.$router.push({ path:'/' })
}