update project config to match official create vue recommendations

src/components/ViewModes/ListView.vue

@@ -3,27 +3,29 @@ const rows = [
   {
     noteTitle: 'Cy Ganderton',
     references: 'Quality Control Specialist',
-    modified: 'Blue',
+    modified: 'Blue'
   },
   {
     noteTitle: 'Hart Hagerty',
     references: 'Desktop Support Technician',
     modified: 'Purple',
+    rootNote: true
   },
   {
     noteTitle: 'Brice Swyre',
     references: 'Tax Accountant',
-    modified: 'Red',
-  },
+    modified: 'Red'
+  }
 ].map((row) => ({
   ...row,
-  selected: false,
+  selected: false
 }))
 
 const checkedRows = ref<{ [key: string]: Boolean }>({})
 
-const toggleRow = (rowId: string) =>
-  (checkedRows.value[rowId] = !checkedRows.value[rowId])
+const toggleRow = (row: any) => {
+  if (!row.rootNote) checkedRows.value[row.noteTitle] = !checkedRows.value[row.noteTitle]
+}
 </script>
 <template>
   <div class="overflow-x-auto">
@@ -45,9 +47,10 @@ const toggleRow = (rowId: string) =>
       </thead>
       <tbody>
         <tr
-          class="hover hover:cursor-pointer"
           v-for="row in rows"
-          @click="toggleRow(row.noteTitle)"
+          :key="row.noteTitle"
+          class="hover hover:cursor-pointer"
+          @click="toggleRow(row)"
         >
           <th>
             <label>
@@ -55,6 +58,7 @@ const toggleRow = (rowId: string) =>
                 type="checkbox"
                 class="checkbox-primary checkbox checkbox-sm border-secondary"
                 v-model="checkedRows[row.noteTitle]"
+                :disabled="row.rootNote"
               />
             </label>
           </th>