как передать переменную между vue файлом?

Question

how to pass variable between to vue file ? Здравствуйте, это мой файл SendCode. vue имеет переменную NewEmail, которую я хочу использовать в другом файле changePass. vue. Есть ли способ избавиться от этого? Кто-нибудь может мне помочь ? Спасибо

<template>
<v-app id="inspire">
    <v-content>
        <v-container class="fill-height" fluid>
            <v-row align="center" justify="center">
                <v-col cols="12" sm="8" md="4">
                    <v-card class="elevation-12">
                        <v-toolbar color="#ff8c00">
                            <v-toolbar-title>Glömt lösenord!</v-toolbar-title>
                        </v-toolbar>
                        <v-card-text>
                            Skrive  ditt email.

                            <v-form>
                                <v-text-field v-model="email"
                                              :error-messages="emailErrors"
                                              label="E-mail"
                                              required
                                              @input="$v.email.$touch()"
                                              @blur="$v.email.$touch()"></v-text-field>

                            </v-form>
                        </v-card-text>
                        <v-card-actions>
                            <v-spacer />
                            <v-btn @click="getCode" color="primary">Skicka koden</v-btn>
                        </v-card-actions>
                    </v-card>
                </v-col>
            </v-row>
        </v-container>
    </v-content>
</v-app>
</template>

<script>
import axios from 'axios'
  import router from '@/router.js'
  import { validationMixin } from 'vuelidate'
  import { required, email } from 'vuelidate/lib/validators'
export default {

    mixins: [validationMixin],
    validations: {
      email: { required, email },
      checkbox: {
        checked(val) {
          return val
        }
      }
  },
    props: {
        source: String,
    },


    data: () => ({
        email: ""
    }),
    methods: {
        getCode: async function() {
            let obj = {
                "email": this.email,
            };
            let NewEmail = this.email;
            let response = await this.$store.dispatch("getCode", obj);
            //console.log(email)
            //console.log(this.email)
            if (response.status == 200) {

                setTimeout(function() {
                    router.push({
                        path: 'ChangePass'
                   });
                }, 500);
        }

    }
    }
}
</script>

Я хочу использовать / передать переменную NewEmail в этом файле из SendCode. vue файл Я новичок в vue и javascript, поэтому я не знаю, как это сделать.

<template>
<v-app id="inspire">
    <v-content>
        <v-container class="fill-height" fluid>
            <v-row align="center" justify="center">
                <v-col cols="12" sm="8" md="4">
                    <v-card class="elevation-12">
                        <v-toolbar color="#ff8c00">
                            <v-toolbar-title>ÄNDRA LÖSENORDET</v-toolbar-title>
                        </v-toolbar>
                        <v-card-text>
                            <v-form>
                                <v-text-field :error="pass1Error" label="Koden" v-model="code1" type="password" />
                                <v-text-field :error="pass2Error" label="Lössenord" v-model="newPassword" type="password" />
                                <v-text-field :error="pass1Error" label="Samma Lössenord" v-model="rePassword" type="password" />

                            </v-form>
                        </v-card-text>
                        <v-alert v-if="passError" type="error">
                            password are not same
                        </v-alert>
                        <v-alert v-if="passwordChanged" type="success">
                            Password has been updated!
                        </v-alert>
                        <v-card-actions>
                            <v-spacer />
                            <v-btn @click="change" color="primary">Ändra</v-btn>
                        </v-card-actions>
                    </v-card>
                </v-col>
            </v-row>
        </v-container>
    </v-content>
</v-app>
</template>


<script>
import axios from 'axios'
import SendCode from "@/views/SendCode.vue";


  import { validationMixin } from 'vuelidate'
  import { required, email } from 'vuelidate/lib/validators'

export default {
    mixins: [validationMixin],


    validations: {
      email: { required, email },
      checkbox: {
        checked(val) {
          return val
        }
      }
  },
    props: {
        source: String,
    },
    data: () => ({

        code1: "",
        newPassword: "",
        rePassword: ""

    }),
    methods: {
        change: async function() {

            let obj = {

                "code1": this.code1,
                "newPassword": this.newPassword,
                "rePassword": this.rePassword,

            };

            console.log(obj)
            let response = await this.$store.dispatch("changePass", obj);
    }
    }
}
</script>