Functionality

[hellkat1911]

• overall the app seems to work well! the main bug I see is that when the page loads, "todo three" is crossed out but its checkbox is unchecked. This is the opposite of what happens for the other todo items

• another bug: if I edit the text directly in one of the existing todos, the data object in App.vue does not update to reflect this

Instead of using checkboxes, I would suggest using a normal div. You could style it to look like a checkbox. If the user clicks it, it updates the todo to completed. You could also add a class to any completed todos which changes the style:

<div v-bind:class="[ isCompleted ? completedClass : '', checkbox ]" />

Another trick I use is to style a checkmark out of a :before or :after pseudoelement. Instead of importing an image, you can use these to fake it and they look nice.

.checkbox {
      width: 30px;
      height: 30px;
      border: 1px solid black;
  }
    .isCompleted:after {
      content: '';
      display: inline-block;
      padding: 5px 9px;
      border-top: 4px solid green;
      border-right: 4px solid green;
      transform: rotate(115deg);
      margin-left: 4px;
      margin-top: 4px;
}