Put REQUEST 404 not found

I am creating a CRUD application where I can add ,edit or delete an article. I created an api to handle a put request to edit an article.

Article.vue:

<template>
    <div>
        <h2>Article</h2>
        <form @submit.prevent="addArticle()" class="mb-3">
         <input type="text" v-model="article.title" class="form-control" placeholder="Title">
         <textarea v-model="article.body" class="form-control" placeholder="Body"></textarea>
         <button type="submit" class="btn btn-light btn-block">Save</button>
        </form>
        <nav aria-label="Page navigation">
            <ul class="pagination">
                <li v-bind:class="[{disabled : !pagination.prev_page_url}]" @click="fetchArticles(pagination.prev_page_url)" class="page-item"><a class="page-link" href="#">Previous</a></li>
                <li class="page-item disabled"><a class="page-link text-dark" href="#">Page {{pagination.current_page}}/{{pagination.last_page}}</a></li>
                <li v-bind:class="[{disabled : !pagination.next_page_url}]" @click="fetchArticles(pagination.next_page_url)" class="page-item"><a class="page-link" href="#">Next</a></li>
            </ul>
        </nav>
        <div class="card card-body mb-2" v-for="article in articles" :key="article.id">
            <h3>{{article.title}}</h3>
            <p>{{article.body}}</p>
            <hr>
            <button @click="editArticle(article)" class="btn btn-primary">Edit</button>
            <button @click="deleteArticle(article.id)" class="btn btn-danger">Delete</button>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            articles:[],
            article:{
                id:'',
                title:'',
                body:''
            },
            article_id:'',
            pagination:{},
            edit:false
        }
    },
    created(){
        this.fetchArticles();
    },
    methods:{
        fetchArticles(page_url){
            let vm = this;
            page_url = page_url || '/api/articles'
            fetch(page_url).
             then(res => res.json()).
             then(res => {
                 this.articles = res.data;
                 vm.makePagination(res.meta,res.links);
             }).
             catch(err => console.log(err));
        },
        makePagination(meta,links){
            let pagination = {
                current_page : meta.current_page,
                last_page : meta.last_page,
                next_page_url : links.next,
                prev_page_url : links.prev
            }
            this.pagination = pagination;
        },
        deleteArticle(article_id){
            if(confirm('Are you sure?')){
                fetch(`api/article/${article_id}`, {
                    method: 'delete'
                })
                .then(res => res.json())
                .then(data => {
                    alert('Article removed');
                    this.fetchArticles();
                })
                .catch(err => console.log(err));
            }
        },
    addArticle() {
      if (this.edit === false) {
        // Add
        fetch('api/article', {
          method: 'post',
          body: JSON.stringify(this.article),
          headers: {
            'content-type': 'application/json'
          }
        })
          .then(res => res.json())
          .then(data => {
            //this.clearForm();
            alert('Article Added');
            this.fetchArticles();
          })
          .catch(err => console.log(err));
      } else {
        // Update
        fetch('api/article', {
          method: 'put',
          body: JSON.stringify(this.article),
          headers: {
            'content-type': 'application/json'
          }
        })
          .then(res => res.json())
          .then(data => {
            //this.clearForm();
            alert('Article Updated');
            this.fetchArticles();
          })
          .catch(err => console.log(err));
      }
    },
        editArticle(article){
            this.edit = true;
            this.article.id = article.id;
            this.article_id = article.id;
            this.article.title = article.title;
            this.article.body = article.body;
        }
    }
}
</script>

It basically checks if my edit of boolean value in addArticle method that it will add new article if this.edit is false, otherwise it will edit the article.

api.php:

//Create a new article
Route::post('article','ArticleController@store');

// Update article
Route::put('article','ArticleController@store');

Now adding a new article works fine but when I tried to edit an article, it says put request is not found. I tried using postman to edit it by passing json data and it can update it but now i tried to implement it in the front end (vuejs) but everytime I hit save to update the article, I get this error. The put request route exist certainly.

How do I fix this?

Edit:

ArticleController:

 public function store(Request $request)
    {
        // Check if is PUT request, then get id and update else post request, create new article
        $article = $request -> isMethod('put') ? Article::findOrFail($request->article_id) :
         new Article;

         // store input in the relevant field
         $article->id = $request->input('article_id');
         $article->title = $request->input('title');
         $article->body = $request->input('body');
        
         //save article and return article
         if($article->save()){
             return new ArticleResource($article);
         }

    }