Reactivity explained

If you have opened the app and clicked an item, you can toggle the checkbox, but on refreshing the page, nothing happens. Also, if you’ve looked closely at the CSS of the <ListItem /> component, you may have noticed that strikethrough styling should be applied on a checked item. This is only the case on the first item.

The toggling of the checkbox is, in fact, native browser behavior and doesn’t signify anything in the context of the state of the Todo list!

We need to wire the changes in the UI to the state of the application. In order to get started, we need to import some utilities from the Vue.js package. Add these two lines to the top of the <script> block:

import { ref } from 'vue'import type { Ref } from 'vue'

The ref function is used to add reactivity and track updates to certain parts of the code. The value of ref is automatically inferred by TypeScript, but for complex types, we can specify the...