Laravel vue – forgot password

iam creating a forogt password in my website with mailhog. i can send the email link to the mailhog and i can receive the email in the mailhog which contains the reset password button which is supposed to redirect me to my website reset.vue where i can reset the password. however my issue is that it redirects me to the laravel instead of vue.
vue codes:
forgot password:

<template>
    <form >

        <div>
            <label for="email">Email:</label>
            <input type="email" name="email" v-model="email" required>
        </div>
        <v-btn  @click="submitForm">Send Password Reset Link</v-btn>
    </form>
</template>

<script>
import axios from 'axios';

    export default {
        data() {
            return {
                email: ''
            };
        },
        
       
        methods: {
            submitForm() {
                axios.post('http://127.0.0.1:8000/api/forgotpassword', { email: this.email,
                 })
                    .then(response => {
                        console.log(response.data);
                        // Show success message to the user
                    })
                    .catch(error => {
                        console.log(error.response.data);
                        // Show error message to the user
                    });
            }
        }
    };
</script>

reset password:

<template>
    <form>
      <div>
        <label for="password">New Password:</label>
        <input type="password" name="password" v-model="password" required>
      </div>
      <div>
        <label for="password_confirmation">Confirm Password:</label>
        <input type="password" name="password_confirmation" v-model="password_confirmation" required>
      </div>
      <v-btn @click="submitForm">Reset Password</v-btn>
    </form>
  </template>
  
  <script>
  import axios from 'axios';
 
  
  export default {
    data() {
      return {
        password: '',
        password_confirmation: '',
        email : ''
      };
    },
    methods: {
      submitForm() {
        let token = this.$route.params.token;
        axios.post(`http://127.0.0.1:8000/api/resetpassword/${token}`, {
            email: this.email,
            password: this.password,
            password_confirmation: this.password_confirmation,
            token: token,
        
          },
          )
          .then(response => {
            console.log(response.data);
            // Show success message to the user
          })
          .catch(error => {
            console.log(error.response.data);
            // Show error message to the user
          });
      }
    }
  };
  </script>
  

controller in laravel :

<?php

namespace AppHttpControllers;

use IlluminateHttpRequest;
use AppModelscase_type;
use AppModelscity;
use AppModelscampaign;
use AppModelscasee;
use AppModelsblood;
use AppModelsUser;
use AppModelsbloodCases;
use IlluminateSupportFacadesStorage;
use IlluminateSupportFacadesValidator;
use IlluminateSupportFacadesPassword;
use IlluminateSupportFacadesHash;
use IlluminateAuthEventsPasswordReset;
class forgotPassController extends Controller
{
    public function sendResetLinkEmail(Request $request)
    {
        $request->validate(['email' => 'required|email']);

        $response = $this->broker()->sendResetLink($request->only('email'));

        if ($response == Password::RESET_LINK_SENT) {
            return response()->json(['message' => 'Reset link sent to your email.']);
        }

        return response()->json(['error' => 'Failed to send reset link.'], 400);
    }

    protected function broker()
    {
        return Password::broker();
    }
    public function reset(Request $request)
    {
        $request->validate([
            'token' => 'required',
            'email' => 'required|email',
            'password' => 'required|confirmed|min:8',
        ]);

        $response = $this->broker()->reset(
            $request->only('email', 'password', 'password_confirmation', 'token'),
            function ($user, $password) {
                $user->password = Hash::make($password);
                $user->save();
            }
        );

        if ($response == Password::PASSWORD_RESET) {
            return response()->json(['message' => 'Password has been reset.']);
        }

        return response()->json(['error' => 'Failed to reset password.'], 400);
    }

}

env file:

APP_NAME=Laravel
APP_ENV=local
APP_KEY=base64:Z3YlschFLAephSU75DAFaJsMtEEjcgMXiqw5b9OPL3o=
APP_DEBUG=true
# APP_URL=http://localhost
APP_URL=http://localhost:8081

LOG_CHANNEL=stack
LOG_DEPRECATIONS_CHANNEL=null
LOG_LEVEL=debug

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=backfinalproject
DB_USERNAME=root
DB_PASSWORD=

BROADCAST_DRIVER=log
CACHE_DRIVER=file
FILESYSTEM_DISK=local
QUEUE_CONNECTION=sync
SESSION_DRIVER=file
SESSION_LIFETIME=120

MEMCACHED_HOST=127.0.0.1

REDIS_HOST=127.0.0.1
REDIS_PASSWORD=null
REDIS_PORT=6379

MAIL_MAILER=smtp
MAIL_HOST=localhost
MAIL_PORT=1025
MAIL_USERNAME=
MAIL_PASSWORD=
MAIL_ENCRYPTION=
MAIL_FROM_ADDRESS="[email protected]"
MAIL_FROM_NAME="${APP_NAME}"

AWS_ACCESS_KEY_ID=
AWS_SECRET_ACCESS_KEY=
AWS_DEFAULT_REGION=us-east-1
AWS_BUCKET=
AWS_USE_PATH_STYLE_ENDPOINT=false

PUSHER_APP_ID=
PUSHER_APP_KEY=
PUSHER_APP_SECRET=
PUSHER_HOST=
PUSHER_PORT=443
PUSHER_SCHEME=https
PUSHER_APP_CLUSTER=mt1

VITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
VITE_PUSHER_HOST="${PUSHER_HOST}"
VITE_PUSHER_PORT="${PUSHER_PORT}"
VITE_PUSHER_SCHEME="${PUSHER_SCHEME}"
VITE_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"

i tried changing the app_url to the port vue runs on but it returns error and when its the port the laravel project runs on it redirects me to the laravel projects instead of the vue where i can reset the pass. any help is appreciated!!