我有以下 endpoints ：

Route::get('/tasks', function(){
    return Task::latest()->pluck('body');
});

Route::get('/projects/{project}', function(Project $project){
    $project->load('tasks');
    return view('projects.show', compact('project'));
});

Route::get('/api/projects/{project}', function(Project $project){
    return $project->tasks->pluck('body');
});

Route::post('/api/projects/{project}/tasks', function(Project $project){
    $task = $project->tasks()->create(request(['body']));
    TaskCreated::dispatch($task);
    return $task;
});

在我的project.show视图中，我调用该组件 . 我有两个单独的浏览器用登录用户打开 .

一旦我点击tab键，我想为特定项目保存任务，因此vue模板如下所示：

<ul>
    <li v-for="task in tasks" v-text="task"></li>
</ul>
<input type="text" v-model="newTask" @blur="addTask">

我的脚本看起来像这样：

export default {
    data(){
        return {
            tasks: [],
            newTask: ''
        }
    },
    created() {
        axios.get('/tasks').then(response => (this.tasks = response.data));

        window.Echo.private('tasks. ' + this.project.id).listen('TaskCreated', e =>{
            this.tasks.push(e.task.body);
        });
    },
    methods: {

        addTask(){
            axios.post('/api/projects/${this.project.id}/tasks', {body: this.newTask})
            .then(response => response.data)
            .then(this.addTask);
        },
        show(){
            tasks.push(this.newTask);

            this.newTask = '';
        }
    }
}

当我在chrome中输入任务时，我想立即在我的其他浏览器中查看它 . 目前，当我输入任务并点击Tab键时，没有任何反应 .

如何在我的视图模板中修复此问题？

vue.js laravel-echo