Ошибка в обработчике v-on (Promise/async): «ReferenceError: форма не определена»

Я пытаюсь отправить форму из vuex в laravel, а также зарегистрировать токен в локальном хранилище.

В моей форме у меня есть метод отправки, который отправляет данные в хранилище, действия js.

Форма представляет собой регистрационную форму, и я могу зафиксировать детали в бэкэнде. Я также получаю обратную связь от проверки бэкэнда

Например

 {"success":true,"data":{"name":"saf,jdfn","token":"eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJhdWQiOiIzIiwianRpIjoiYjc2ZDgzNjUzNDg0ZDA4OGRiMjMyOTIxZjViNjc3YzlkN2Q0ZeMbU31lGkD8pirH1JtQr1ZKL1S6eYuscQUUhKOnFodEum3Z4G1gGyHJ27UK1KzjnL3M"},"message":"Yay! A user has been successfully created."}

Я также хочу сохранить токен доступа к localStorage

<template lang="en">
    <div class="body">
           <div class="cont">
                <v-form
                  ref="form"
                  class="form sign-in"
                  v-model="valid"
                  lazy-validation
                >
                <v-text-field
                    v-model="form.name"
                    :counter="10"
                    outlined
                    :rules="nameRules"
                    label="Name"
                    required
                  ></v-text-field>
                 

                    <v-text-field
                      v-model="form.email"
                      :rules="emailRules"
                      label="E-mail"
                      outlined
                      required
                    ></v-text-field>

                    <v-text-field
                    v-model="form.password"
                    outlined
                    type="password"
                    :rules="passRules"
                    label="Password"
                    required
                    append-icon="mdi-map-marker"
                  ></v-text-field>

                  <v-text-field
                    v-model="form.confirm_password"
                    outlined
                    type="password"
                    :rules="passRules"
                    label="confirm password"
                    required
                    append-icon="mdi-map-marker"
                  ></v-text-field>


                  <v-btn
                    :disabled="!valid"
                    color="success"
                    class="submit mr-8"
                    @click="submit"
                  >
                    Submit
                  </v-btn>
               </v-form>
             </div>
    </div>
       
    </div>
</template>

<script>
  export default {
    data: () => ({
      form:{
        name: '',
        email: '',
        password: '',
        confirm_password: ''
      },
      valid: true,
      name: '',
      nameRules: [
        v => !!v || 'Name is required',
        v => (v && v.length <= 10) || 'Name must be less than 10 characters',
      ],
      email: '',
      emailRules: [
        v => !!v || 'E-mail is required',
        v => /.+@.+\..+/.test(v) || 'E-mail must be valid',
      ],
      password: '',
      passRules: [
        v => !!v || 'Password is required',
        v => (v && v.length >=8 ) || 'Name must be atleast 8 characters',
      ],
    
    }),

    methods: {
    async  submit () {
      await this.$refs.form.validate();
      this.$store.dispatch('registerUser', this.form);
      },
    },
  }
</script>

В моем store.js у меня есть этот код

 actions: {
        registerUser:(context, form) => {
            axios.post('/api/register', form)
            .then(
                res=> {
                    this.res = res.data;
                       if(res.data.token){
                             localStorage.setItem(
                        'token',
                          res.data.token
                    )
                  }
                }
               ) .catch(
                err => {
                  console.log(err)
                }
            )
            console.log(this.form)
        },

Не могу получить токен в локальном хранилище