Vue/Laravel + Vue.js Todo

####TodoController
public function getTodos(){ 
  $todos = Todo::all();
  return $todos;
}

public function addTodo(Request $request){
  $todo = new Todo;
  $todo->title = $request->title;
  $todo->save();
  $todos = Todo::all();
  return $todos;
}

public function deleteTodo(Request $request){ 
  $todo = Todo::where('id', $request->id)->delete();
  $todos = Todo::all();
  return $todos;
}

###welcome.blade.php
!doctype html>
  html lang="{{ app()->getLocale() }}">
    head>
      meta charset="utf-8">
      meta name="csrf-token" content="{{ csrf_token() }}"> 
      meta http-equiv="X-UA-Compatible" content="IE=edge">
      meta name="viewport" content="width=device-width, initial-scale=1">
      link rel="stylesheet" href="{{ asset('css/app.css') }}"> 
      title>Laravel-Vue-todo
    /head>
    body>
      div id="app"> 
        div class="container">
          div class="row">
            div class="col-xs-6">
              table class="table">  
                  tr v-for="todo in todos" v-bind:key="todo.id">  
                    td>@{{ todo.id }}/td> 
                    td>@{{ todo.title }}/td> 
                    td>button class="btn btn-primary" v-on:click="deleteTodo(todo.id)">完了/button>/td>
                  /tr> 
              /table>
           /div>
          div class="col-xs-6">
            div class="input-group">
              input type="text" class="form-control" placeholder="タスクを入力してください" v-model="new_todo"> 
                span class="input-group-btn">
                  button class="btn btn-success" type="button" v-on:click="addTodo">タスクを登録する/button> 
                /span>


      script src="{{ asset('js/app.js') }}">/script> !-- ←④ -->
    /body>
/html>

########assets/js/app.js
require('./bootstrap');

window.Vue = require('vue');

Vue.component('example-component', require('./components/ExampleComponent.vue'));

const app = new Vue({
    el: '#app',

    data: {
  
      todos: [] //←TODO を格納するための配列を用意
  
    },
  
    methods: {
  
      fetchTodos: function(){ //←axios.get で TODO リストを取得しています
  
        axios.get('/api/get').then((res)=>{
  
          this.todos = res.data //← 取得した TODO リストを todos に格納
  
        })
  
      },
      addTodo: function(){ 

        axios.post('/api/add',{
    
          title: this.new_todo
    
        }).then((res)=>{
    
          this.todos = res.data
    
          this.new_todo = ''
    
        })
    
      },
      deleteTodo: function(task_id){ 

        axios.post('/api/del',{
    
          id: task_id
    
        }).then((res)=>{
    
          this.todos = res.data
    
        })
    
        }
    
    },
      
    created() { //← インスタンス生成時に fetchTodos()を実行したいので、created フックに登録します。
  
      this.fetchTodos()
  
    },
});



########routes/api.php
Route::group(['middleware' => 'api'], function() {

Route::get('get', 'TodoController@getTodos');
Route::post('add', 'TodoController@addTodo');
Route::post('del',  'TodoController@deleteTodo');
});


#########routes/web.php
Route::get('/{app}', function () {  //←追記

return view('welcome');

})->where('app', '.*');