我用 Laravel 和 Vue.js 制作了一個 todolist：我可以添加一個類別，我可以為每個類別添加一個 todos 列表。對于每個類別列表，都有一個為該類別添加新待辦事項的輸入。我用一個組件制作了所有東西。我用 Laravel 創建了 api。一切都很完美。唯一的問題是：當我在輸入“添加待辦事項”中寫一些東西時，它也會寫在其他輸入中。這是合乎邏輯的，因為輸入標簽中有 v-model 指令。是否可以繞過這種行為？vue組件的內容：<template><div>    <form @submit.prevent="addCategorie()">        <!-- Grid row -->        <div class="form-row align-items-center" style="margin-bottom: 2rem;">            <!-- Grid column -->            <div class="col-auto">                <!-- Default input -->                <input v-model="categorie.name" type="text" class="form-control" id="name" aria-describedby="name" placeholder="Categorie">            </div>            <!-- Grid column -->            <!-- Grid column -->            <div class="col-auto">                <button type="submit" class="btn btn-primary btn-md mt-0">Add</button>            </div>        </div>        <!-- Grid row -->    </form>     <div class="row">        <section v-for="(categorie) in categories" v-bind:key="categorie.id" class="col-sm-6 col-md-4">                <div class="card" style="margin-bottom: 2rem;">                    <div class="card-header align-items-center">                        <h3>{{ categorie.name }}                            <span @click="deleteCategorie(categorie.id)"  style="font-size: 24px; color: #FF3547;">                                <i class="fas fa-trash-alt"></i>                            </span>                        </h3>                    </div>                    <ul v-for="todo in categorie.todos" v-bind:key="todo.id" class="list-group list-group-flush">                        <li class="list-group-item">                            {{ todo.name }}                            <span @click="deleteTodo(todo.id)"  style="font-size: 14px; color: #FF3547;">                                <i class="fas fa-trash-alt"></i>                            </span>                        </li>                    </ul>                </div>        </section>    </div></div>