How to send a delete request from Vue Js to Json server?

I am creating a simple to do list and using Json server as a mock data base. I am trying to add a delete button that will delete the goals that have already added to the Vue application.

This is my main app

 <template>
 
<h1>To Do List </h1>
 <addProject />

 
 <div v-for="newGoal in newGoals" :key="newGoal.id" class = 'newGoal'>
  <li >{{newGoal.goal}} <deleteGoalVue /> </li>
 </div>
 


 
</template>


<script>
import addProject from './components/addProject.vue';
import deleteGoalVue from './components/deleteGoal.vue';



export default {
  name: 'App',
  components: { addProject, deleteGoalVue },
  data(){
    return {
      newGoals: [],
      
          }
    },
  
  
  mounted() {
      fetch('http://localhost:3000/newGoals')
      .then(res => res.json())
      .then(data => this.newGoals = data)
      .catch(err => console.log(err.message))

}
}

This is my add project/goal component

<template>
 <form @submit.prevent="handleSubmit">
   <h3><div class= instructions >Type in your goal for the day</div></h3>
  <input type="text" v-model="goal" placeholder="Your goal">
  <input type="submit" value="Add Goal" @click="storeGoal" >
  </form>
</template>


<script>

export default {
  props: ['project'],
  data (){
    return{
      goal: "",
      
     
    }
    
    },
      handleSubmit(){
        let project = {
          goal: this.goal,
        }
      
       fetch('http://localhost:3000/newGoals', {
        method: 'POST',
        headers: { 'Content-Type' : 'application/json' },
        body: JSON.stringify(project)

       })
      }
    }

And this is my Delete Goal component

<template>
  <button @click ="deleteGoal" >Delete Goal</button>
</template>

<script>
export default {
    
    methods: {
   deleteGoal() {
    fetch('http://localhost:3000/newGoals', { method: 'DELETE'})
   }
}
    }
    

</script>

The error that I am getting when I press the 'Delete Goal' button says DELETE http://localhost:3000/newGoals 404 (Not Found)