modifications:
copy the source codes and paste it as template.
Remove bordered, padding of q-item, tag="label" from
Add v-for directive
Add :key="task.id"
@click="!task.completed" clickable
The following warning will be cleared
[Vue warn]: Property or method "check1" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.
### Add Due Date and Time
Look for a list item with text at both the left and the right hand side.
Example https://quasar.dev/vue-components/list-and-list-items#example--itemlabel
See also https://quasar.dev/vue-components/menu#positioning
Add an icon, find it in https://fonts.google.com/icons?selected=Material+Icons
Set icon size to 18px
Apply flexbox to position the icon, label and caption
https://quasar.dev/layout/grid/introduction-to-flexbox#introduction
Apply a row class to the q-item-section for the icon, dueDate and dueTime.
To place the icon between dueDate and dueTime, use the justify-center in the flex column.
To push the dueDate to the right edge, apply a row class with justify-end property.
Do the same for dueTime.
### Add more styling for final touch
Add Separator between list items
https://quasar.dev/vue-components/list-and-list-items#qlist-api
QList API has a separator property
Completed item displayed green, incomplete item displayed orange.
Use https://quasar.dev/style/color-palette#introduction to pick a color
Use text-strike to cross out completed task
Conditionally add text-strike class to q-item-label:
<q-item-label :class="{ 'text-strike': task.completed }">{{ task.name }}</q-item-label>
https://quasar.dev/style/typography#css-helper-classes
Helpful positioning control using flexbox https://quasar.dev/layout/grid/introduction-to-flexbox
Create the List of Tasks with Hard Coded Data
pages/PageTodo.vue
Create an array of tasks as data method.
Browse for an example of list of items which use checkbox
https://quasar.dev/vue-components/list-and-list-items#example--settings