Vus.js Laravel Update records not working - laravel

Question

i am beginner of vue.js and laravel programming successfully done add records and view records from the database.but i can't update the records.when check the error through the console. it displayed the following
Failed to load resource: the server responded with a status of 404 (Not Found)
i don't know how to solve them.my api is working successfully.
what i done so far i attached below.
Laravel
Routes
Route::put('/update/{id}',[App\Http\Controllers\ContactController::class, 'update']);
ContactController
public function update(Request $request, $id)
{
$contact = new Contact([
'name' => $request->name,
'address' => $request->address,
'nic' => $request->nic
]);
$contact->update();
return response()->json('Contact Updateddd!');
}
Model
class Contact extends Model{
protected $table = "contact";
protected $primaryKey = "id";
protected $fillable = ["name", "address", "nic"];
}
Front End Vue JS
Save records and Updating records i adding the same form with validation. save is working but update dosen't working.
<form #submit.prevent="save">
<div class="form-group">
<label>Employee Name</label>
<input v-model="task.name" type="text" class="form-control">
</div>
<div class="form-group">
<label>Employee Address</label>
<input v-model="task.address" type="text" class="form-control" >
</div>
<div class="form-group">
<label>Nic</label>
<input v-model="task.nic" type="text" class="form-control">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
table records view from the database successfullly i attached code below. each rows i put the edit button for edit. when i click the edit button editable row records are passing to the form successfully. after that make the changes and click edit records not i updated what is the error i got i attached above.
table code
<td>{{ task.id }}</td>
<td>{{ task.name }}</td>
<td>{{ task.address }}</td>
<td>{{ task.nic }}</td>
<td>
<button type="button" class="btn btn-primary" #click="edit(task)">Edit</button>
<button type="button" class="btn btn-danger" #click="remove(task)">Delete</button>
</td>
Save and update code . save is working update only not working please check the update code
i attached the full code for easy to find out the error.
import Vue from 'vue';
import axios from 'axios';
Vue.use(axios)
export default {
name: 'Crud',
data () {
return {
result: {},
task:{
id: '',
name: '',
address: '',
nic: ''
}
}
},
created() {
console.log("created() called.....");
this.loadTaks();
},
mounted() {
console.log("mounted() called.......");
},
methods: {
loadTaks()
{
Vue.use(axios);
console.log("LoadTasks() calling....");
// var page = "http://localhost:8088/api/v1/employee/get-all-employees";
var page = "http://127.0.0.1:8000/api/contact";
axios.get(page)
.then(
({data})=>{
console.log(data);
this.result = data;
}
);
},
save()
{
if(this.task.id == '')
{
this.saveData();
}
else
{
this.updateData();
}
},
saveData()
{
axios.post('http://127.0.0.1:8000/api/save', this.task)
.then(
({data})=>{
this.loadTaks();
this.task.name = '';
this.address = '',
this.nic = '',
alert("saved!!!");
}
)
},
updateData()
{
var url = '127.0.0.1:8000/api/update/'+this.task.id;
axios.put(url, this.task)
.then(
({data})=>{
this.task.name = '';
this.address = '',
this.nic = ''
this.id = ''
alert("Updated!!!");
this.loadTaks();
}
);
},
edit(task){
this.task = task;
},
remove(task){
var url = 'http://127.0.0.1:8000/api/contact/delete/'+this.task.id;
axios.delete();
}
}
}
</script>
Have a problem on the controller update funtion what was the error here
public function update(Request $request, $id)
{
$contact = new Contact([
'name' => $request->name,
'address' => $request->address,
'nic' => $request->nic
]);
$contact->update();
return response()->json('Contact Updateddd!');
}