Проблема здесь в том, что вы не используете атрибут key в l oop. Специальный атрибут key в основном используется в качестве подсказки для алгоритма виртуальной DOM Vue для идентификации VNodes при сравнении нового списка узлов со старым списком.
Без ключей, Vue использует алгоритм, который минимизирует перемещение элементов и пытается исправлять / повторно использовать элементы того же типа на месте, насколько это возможно. Таким образом, вы получаете следующее поведение:
, если я установлю флажок незавершенной задачи в Незавершенном списке или полной задачи в Завершенном списке, задача под ней также переключается.
Итак, чтобы решить эту проблему, вам просто нужно привязать key к каждому l oop, например:
<li v-for="task in incompleteTasks" :key="task.id">
<input type="checkbox" v-model=task.completed>{{ task.description }}
</li>
С ключами он будет переупорядочивать элементы в зависимости от изменения порядка ключей , а элементы с ключами, которых больше нет, всегда будут удалены / уничтожены.
Рабочий скрипт