Добавлять атрибуты только для внешнего интерфейса в массив, взятый из внутреннего интерфейса

Question

Я учился только для Vue js и хочу сделать простое «приложение TODO».Я уже сделал свою бэкэнд-часть с Джанго, и теперь я хочу сделать фронтенд.Я получаю данные для моего Vue JS, как это:

Приложение выглядит так:

Я хочу добавить функцию для изменения моего TODO, но форма для этого изменения должна быть скрыта.Как я могу контролировать скрытую форму для каждого TODO?Должен ли я добавить поле для этого в бэкэнде?Примерно так:

id: 101
title: 'HEY HEY'
change-show: false

Или я должен добавить его на своем веб-интерфейсе, когда получу данные?Или что-то лучше (я думаю, что мои 2 способа не являются «Лучшей практикой»)

Код шаблона:

<template>
  <div class="todo">
    <form v-on:submit.prevent="add_todo">
      <input required v-model="new_todo_text"/>
      <button>Add new todo</button>
    </form>
    <ul v-for="(todo, index) in todos" v-bind:key="index">
      <li>{{todo.title}}
        <button v-on:click="remove_todo(todo.id, index)">Remove</button>
        <button>Change</button>
        <form v-on:submit.prevent="change_todo(index) v-if="WHAT SHOULD BE HERE">
          <input required v-model="WHAT SHOULD BE HERE"/>
          <button>Change todo</button>
        </form>
      </li>
    </ul>
  </div>
</template>