I am building a Vue comment section in a Laravel Blog with Vue 3, Laravel and Bootstrap.

I have this method for storing comments in the Comments Table (MySQL)

<script>
export default {
   props: ['userid', 'blogid'],
    data() {
       return {
           formData:{
               comment:'',
               user_id: this.userid,
               blog_id: this.blogid,

           }
       }
    },
    methods: {
       commentStore(){
           axios.post('comment/store', this.formData).then((response)=> {
           console.log(response.data)
       }).catch((errors) =>{
               console.log(errors)
    });
       }
    }
}

It should be executed upon clicking the commentStore item, as seen below:

<template>
<div class="row">
    <div class="col-xl-12">
        <div class="comment-form__input-box">
            <textarea name="comment" v-model="formData.comment" placeholder="Your message here" rows="2"></textarea>
        </div>
        <button type="submit" class="thm-btn comment-form__btn" @click.native="commentStore">submit
            comment</button>
    </div>
</div>

The Problem

On click, the item still executes a previous method that I deleted.

  <script>
export default {
   props: ['userid', 'blogid'],
    data() {
       return {
           formData:{
               comment:'',
               user_id: this.userid,
               blog_id: this.blogid,

           }
       }
    },
    methods: {
       commentStore(){
        alert(this.userid)
       }
    }
}

Question

1. How do I clear Vue Js Cache?

2. If it's not the Cache, why is the current method not executing?

I have Tried

1. clearing browsers cache

2. performing a PHP artisan optimize on CLI

No changes, Thank you for the Assit.