Another approach to auto-update modified with current time

frontend/src/components/FileExplorer.vue

@@ -17,7 +17,7 @@
         <td class="name">
           <FileRenameInput :doc="editing" :rename="mkdir" :exit="() => {editing = null}" />
         </td>
-        <FileModified :doc=editing />
+        <FileModified :doc=editing :key=nowkey />
         <FileSize :doc=editing />
         <td class="menu"></td>
       </tr>
@@ -61,7 +61,7 @@
               <button v-if="cursor == doc" class="rename-button" @click="() => (editing = doc)">🖊️</button>
             </template>
           </td>
-          <FileModified :doc=doc />
+          <FileModified :doc=doc :key=nowkey />
           <FileSize :doc=doc />
           <td class="menu">
             <button tabindex="-1" @click.stop="contextMenu($event, doc)">⋮</button>
@@ -79,7 +79,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watchEffect, shallowRef } from 'vue'
+import { ref, computed, watchEffect, shallowRef, onMounted, onUnmounted } from 'vue'
 import { useDocumentStore } from '@/stores/documents'
 import { Doc } from '@/repositories/Document'
 import FileRenameInput from './FileRenameInput.vue'
@@ -225,6 +225,13 @@ watchEffect(() => {
     focusBreadcrumb()
   }
 })
+let nowkey = ref(0)
+let modifiedTimer: any = null
+const updateModified = () => {
+  nowkey.value = Math.floor(Date.now() / 1000)
+}
+onMounted(() => { updateModified(); modifiedTimer = setInterval(updateModified, 1000) })
+onUnmounted(() => { clearInterval(modifiedTimer) })
 const mkdir = (doc: Doc, name: string) => {
   const control = connect(controlUrl, {
     open() {