diff --git a/packages/web-app-files/package.json b/packages/web-app-files/package.json
index 0c68da34e83..3346b3a6a6f 100644
--- a/packages/web-app-files/package.json
+++ b/packages/web-app-files/package.json
@@ -24,7 +24,6 @@
     "sanitize-html": "^2.7.0",
     "semver": "^7.3.8",
     "uuid": "^9.0.0",
-    "vue-async-computed": "^3.9.0",
     "vue-concurrency": "4.0.0",
     "vue-gettext": "2.1.12",
     "vue-resize": "^1.0.1",
diff --git a/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue b/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue
index e52e8102d8d..3654740b6dd 100644
--- a/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue
+++ b/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue
@@ -5,12 +5,12 @@
         v-if="file.thumbnail"
         key="file-thumbnail"
         :style="{
-          'background-image': $asyncComputed.preview.updating ? 'none' : `url(${preview})`
+          'background-image': loadPreviewTask.isRunning ? 'none' : `url(${preview})`
         }"
         class="details-preview oc-flex oc-flex-middle oc-flex-center oc-mb"
         data-testid="preview"
       >
-        <oc-spinner v-if="$asyncComputed.preview.updating" />
+        <oc-spinner v-if="loadPreviewTask.isRunning" />
       </div>
       <div
         v-else
@@ -157,8 +157,8 @@
   </div>
 </template>
 <script lang="ts">
-import { computed, ComputedRef, defineComponent, inject, ref, unref } from 'vue'
-import { mapActions, mapGetters } from 'vuex'
+import { computed, ComputedRef, defineComponent, inject, ref, unref, watch } from 'vue'
+import { mapGetters } from 'vuex'
 import { ImageDimension } from '../../../constants'
 import { loadPreview } from 'web-pkg/src/helpers/preview'
 import upperFirst from 'lodash-es/upperFirst'
@@ -168,6 +168,7 @@ import { ShareTypes } from 'web-client/src/helpers/share'
 import {
   useAccessToken,
   useCapabilityFilesTags,
+  useClientService,
   usePublicLinkContext,
   useStore,
   useTranslations,
@@ -183,6 +184,7 @@ import { Resource } from 'web-client'
 import { buildShareSpaceResource } from 'web-client/src/helpers'
 import { configurationManager } from 'web-pkg/src/configuration'
 import { createFileRouteOptions } from 'web-pkg/src/helpers/router'
+import { useTask } from 'vue-concurrency'
 
 export default defineComponent({
   name: 'FileDetails',
@@ -199,6 +201,10 @@ export default defineComponent({
     } = useClipboard({ legacy: true, copiedDuring: 550 })
 
     const file = inject<ComputedRef<Resource>>('displayedItem')
+    const isPublicLinkContext = usePublicLinkContext({ store })
+    const accessToken = useAccessToken({ store })
+    const clientService = useClientService()
+    const preview = ref(undefined)
 
     const directLink = computed(() => {
       return `${store.getters.configuration.server}files/spaces/personal/home${encodePath(
@@ -224,24 +230,56 @@ export default defineComponent({
       })
     }
 
+    const loadData = async () => {
+      const calls = []
+      if (unref(file).type === 'file' && !unref(isPublicLinkContext)) {
+        calls.push(
+          store.dispatch('Files/loadVersions', {
+            client: unref(clientService).owncloudSdk,
+            fileId: unref(file).id
+          })
+        )
+      }
+      await Promise.all(calls.map((p) => p.catch((e) => e)))
+    }
+
+    const loadPreviewTask = useTask(function* (signal, file) {
+      preview.value = yield loadPreview({
+        resource: file,
+        isPublic: unref(isPublicLinkContext),
+        dimensions: ImageDimension.Preview,
+        server: store.getters.configuration.server,
+        userId: store.getters.user.id,
+        token: unref(accessToken)
+      })
+    }).restartable()
+
+    watch(
+      file,
+      () => {
+        loadData()
+        loadPreviewTask.perform(unref(file))
+      },
+      { immediate: true }
+    )
+
     return {
       copiedEos,
+      preview,
       copyEosPathToClipboard,
       copiedDirect,
       copyDirectLinkToClipboard,
       isClipboardCopySupported,
       isUserContext: useUserContext({ store }),
-      isPublicLinkContext: usePublicLinkContext({ store }),
-      accessToken: useAccessToken({ store }),
+      isPublicLinkContext,
+      accessToken,
       space: inject<ComputedRef<Resource>>('displayedSpace'),
       directLink,
       file,
-      hasTags: useCapabilityFilesTags()
+      hasTags: useCapabilityFilesTags(),
+      loadPreviewTask
     }
   },
-  data: () => ({
-    loading: false
-  }),
   computed: {
     ...mapGetters('runtime/spaces', ['spaces']),
     ...mapGetters('Files', ['versions', 'sharesTree', 'sharesTreeLoading', 'highlightedFile']),
@@ -446,35 +484,7 @@ export default defineComponent({
       return this.sharedItem?.file?.source
     }
   },
-  watch: {
-    file: {
-      handler: function () {
-        this.loadData()
-      },
-      immediate: true
-    }
-  },
-  asyncComputed: {
-    preview: {
-      async get() {
-        // TODO: this timeout resolves flickering of the preview because it's rendered multiple times. Needs a better solution.
-        await new Promise((resolve) => setTimeout(resolve, 500))
-        return loadPreview({
-          resource: this.file,
-          isPublic: this.isPublicLinkContext,
-          dimensions: ImageDimension.Preview,
-          server: this.configuration.server,
-          userId: this.user.id,
-          token: this.accessToken
-        })
-      },
-      lazy: true,
-      watch: ['file.id']
-    }
-  },
   methods: {
-    ...mapActions('Files', ['loadPreview', 'loadVersions']),
-
     getParentSharePath(childPath, shares) {
       let currentPath = childPath
       if (!currentPath) {
@@ -492,14 +502,6 @@ export default defineComponent({
     expandVersionsPanel() {
       eventBus.publish(SideBarEventTopics.setActivePanel, 'versions')
     },
-    async loadData() {
-      const calls = []
-      if (this.file.type === 'file' && !this.isPublicLinkContext) {
-        calls.push(this.loadVersions({ client: this.$client, fileId: this.file.id }))
-      }
-      await Promise.all(calls.map((p) => p.catch((e) => e)))
-      this.loading = false
-    },
     getTagLink(tag) {
       return createLocationCommon('files-common-search', {
         query: { term: `Tags:${tag}`, provider: 'files.sdk' }
diff --git a/packages/web-app-files/tests/unit/components/SideBar/Details/__snapshots__/FileDetails.spec.ts.snap b/packages/web-app-files/tests/unit/components/SideBar/Details/__snapshots__/FileDetails.spec.ts.snap
index 9c95e5a9799..8d877323bcf 100644
--- a/packages/web-app-files/tests/unit/components/SideBar/Details/__snapshots__/FileDetails.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/components/SideBar/Details/__snapshots__/FileDetails.spec.ts.snap
@@ -3,8 +3,8 @@
 exports[`Details SideBar Panel displays a resource of type file on a private page updates when the shareTree updates 1`] = `
 <div id="oc-file-details-sidebar">
   <div>
-    <div class="details-preview oc-flex oc-flex-middle oc-flex-center oc-mb" style="background-image: url(null);">
-      <!--v-if-->
+    <div class="details-preview oc-flex oc-flex-middle oc-flex-center oc-mb" style="background-image: none;">
+      <oc-spinner-stub arialabel="" size="medium"></oc-spinner-stub>
     </div>
     <div class="oc-flex oc-flex-middle oc-my-m">
       <oc-status-indicators-stub indicators="[object Object]" resource="[object Object]" target=""></oc-status-indicators-stub>
@@ -56,8 +56,8 @@ exports[`Details SideBar Panel displays a resource of type file on a private pag
 exports[`Details SideBar Panel displays a resource of type file on a private page updates when the shareTree updates 2`] = `
 <div id="oc-file-details-sidebar">
   <div>
-    <div class="details-preview oc-flex oc-flex-middle oc-flex-center oc-mb" style="background-image: url(null);">
-      <!--v-if-->
+    <div class="details-preview oc-flex oc-flex-middle oc-flex-center oc-mb" style="background-image: none;">
+      <oc-spinner-stub arialabel="" size="medium"></oc-spinner-stub>
     </div>
     <div class="oc-flex oc-flex-middle oc-my-m">
       <oc-status-indicators-stub indicators="[object Object]" resource="[object Object]" target=""></oc-status-indicators-stub>
diff --git a/packages/web-app-search/package.json b/packages/web-app-search/package.json
index c5576745a49..c53b10f8ada 100644
--- a/packages/web-app-search/package.json
+++ b/packages/web-app-search/package.json
@@ -9,7 +9,6 @@
   },
   "peerDependencies": {
     "lodash-es": "^4.17.21",
-    "vue-async-computed": "^3.9.0",
     "vue-gettext": "2.1.12",
     "web-app-files": "workspace:*",
     "web-pkg": "npm:@ownclouders/web-pkg"
diff --git a/packages/web-runtime/package.json b/packages/web-runtime/package.json
index 22dd94677f9..da853e69a80 100644
--- a/packages/web-runtime/package.json
+++ b/packages/web-runtime/package.json
@@ -39,7 +39,6 @@
     "utf8": "^3.0.0",
     "uuid": "^9.0.0",
     "vue": "3.2.45",
-    "vue-async-computed": "^3.9.0",
     "vue-concurrency": "4.0.0",
     "vue-events": "^3.1.0",
     "vue-gettext": "2.1.12",
diff --git a/packages/web-runtime/src/defaults/vue.js b/packages/web-runtime/src/defaults/vue.js
index 2f12418b766..9894205bbb2 100644
--- a/packages/web-runtime/src/defaults/vue.js
+++ b/packages/web-runtime/src/defaults/vue.js
@@ -9,7 +9,6 @@ import VueScrollTo from 'vue-scrollto'
 import VueResize from 'vue-resize'
 import VueMeta from 'vue-meta'
 import PortalVue from 'portal-vue'
-import AsyncComputed from 'vue-async-computed'
 import VueRouter from 'vue-router'
 import Vuex from 'vuex'
 
@@ -23,7 +22,6 @@ Vue.use(VueMeta, {
   refreshOnceOnNavigation: true
 })
 Vue.use(PortalVue)
-Vue.use(AsyncComputed)
 
 Vue.component('AvatarImage', Avatar)
 
diff --git a/packages/web-test-helpers/package.json b/packages/web-test-helpers/package.json
index 787da978981..b2c86eb8b32 100644
--- a/packages/web-test-helpers/package.json
+++ b/packages/web-test-helpers/package.json
@@ -4,7 +4,6 @@
   "main": "src/index.ts",
   "peerDependencies": {
     "axios": "0.27.2",
-    "vue-async-computed": "^3.9.0",
     "vue-gettext": "2.1.12",
     "vue-router": "3.6.5",
     "vuex": "4.1.0"
diff --git a/packages/web-test-helpers/src/defaultPlugins.ts b/packages/web-test-helpers/src/defaultPlugins.ts
index 13234d712f6..7b279331bf7 100644
--- a/packages/web-test-helpers/src/defaultPlugins.ts
+++ b/packages/web-test-helpers/src/defaultPlugins.ts
@@ -1,6 +1,5 @@
 import DesignSystem from '@ownclouders/design-system'
 import GetTextPlugin from 'vue-gettext'
-import AsyncComputed from 'vue-async-computed'
 import Vue from 'vue'
 
 window.Vue = Vue
@@ -8,13 +7,11 @@ window.Vue = Vue
 export interface DefaultPluginsOptions {
   designSystem?: boolean
   gettext?: boolean
-  asyncComputed?: boolean
 }
 
 export const defaultPlugins = ({
   designSystem = true,
-  gettext = true,
-  asyncComputed = true
+  gettext = true
 }: DefaultPluginsOptions = {}) => {
   const plugins = []
 
@@ -48,9 +45,5 @@ export const defaultPlugins = ({
     })
   }
 
-  if (asyncComputed) {
-    plugins.push(AsyncComputed)
-  }
-
   return plugins
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index fa5216c3593..73d686809ae 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -473,7 +473,6 @@ importers:
       sanitize-html: ^2.7.0
       semver: ^7.3.8
       uuid: ^9.0.0
-      vue-async-computed: ^3.9.0
       vue-concurrency: 4.0.0
       vue-gettext: 2.1.12
       vue-resize: ^1.0.1
@@ -497,7 +496,6 @@ importers:
       sanitize-html: 2.7.0
       semver: 7.3.8
       uuid: 9.0.0
-      vue-async-computed: 3.9.0
       vue-concurrency: 4.0.0
       vue-gettext: 2.1.12_6c2crj3kpnhb2sofrku4e7jhce
       vue-resize: 1.0.1
@@ -510,7 +508,7 @@ importers:
       web-runtime: link:../web-runtime
     devDependencies:
       '@jest/globals': 29.3.1
-      '@vueuse/core': 9.8.2
+      '@vueuse/core': 9.8.2_vue@3.2.45
 
   packages/web-app-pdf-viewer:
     specifiers:
@@ -538,14 +536,12 @@ importers:
     specifiers:
       lodash-es: ^4.17.21
       mark.js: ^8.11.1
-      vue-async-computed: ^3.9.0
       vue-gettext: 2.1.12
       web-app-files: workspace:*
       web-pkg: npm:@ownclouders/web-pkg
     dependencies:
       lodash-es: 4.17.21
       mark.js: 8.11.1
-      vue-async-computed: 3.9.0_vue@2.7.14
       vue-gettext: 2.1.12_6c2crj3kpnhb2sofrku4e7jhce
       web-app-files: link:../web-app-files
       web-pkg: link:../web-pkg
@@ -651,7 +647,6 @@ importers:
       utf8: ^3.0.0
       uuid: ^9.0.0
       vue: 3.2.45
-      vue-async-computed: ^3.9.0
       vue-concurrency: 4.0.0
       vue-events: ^3.1.0
       vue-gettext: 2.1.12
@@ -704,7 +699,6 @@ importers:
       utf8: 3.0.0
       uuid: 9.0.0
       vue: 3.2.45
-      vue-async-computed: 3.9.0_vue@3.2.45
       vue-concurrency: 4.0.0_vue@3.2.45
       vue-events: 3.1.0
       vue-gettext: 2.1.12_6c2crj3kpnhb2sofrku4e7jhce
@@ -730,13 +724,11 @@ importers:
   packages/web-test-helpers:
     specifiers:
       axios: 0.27.2
-      vue-async-computed: ^3.9.0
       vue-gettext: 2.1.12
       vue-router: 3.6.5
       vuex: 4.1.0
     dependencies:
       axios: 0.27.2
-      vue-async-computed: 3.9.0
       vue-gettext: 2.1.12_6c2crj3kpnhb2sofrku4e7jhce
       vue-router: 3.6.5
       vuex: 4.1.0
@@ -6141,6 +6133,7 @@ packages:
       '@babel/parser': 7.20.7
       postcss: 8.4.20
       source-map: 0.6.1
+    dev: true
 
   /@vue/compiler-sfc/3.2.40:
     resolution: {integrity: sha512-tzqwniIN1fu1PDHC3CpqY/dPCfN/RN1thpBC+g69kJcrl7mbGiHKNwbA6kJ3XKKy8R6JLKqcpVugqN4HkeBFFg==}
@@ -6555,13 +6548,13 @@ packages:
       - supports-color
     dev: true
 
-  /@vueuse/core/9.8.2:
+  /@vueuse/core/9.8.2_vue@3.2.45:
     resolution: {integrity: sha512-aWiCmcYIpPt7xjuqYiceODEMHchDYthrJ4AqI+FXPZrR23PZOqdiktbUVyQl2kGlR3H4i9UJ/uimQrwhz9UouQ==}
     dependencies:
       '@types/web-bluetooth': 0.0.16
       '@vueuse/metadata': 9.8.2
-      '@vueuse/shared': 9.8.2
-      vue-demi: 0.13.11
+      '@vueuse/shared': 9.8.2_vue@3.2.45
+      vue-demi: 0.13.11_vue@3.2.45
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
@@ -6571,10 +6564,10 @@ packages:
     resolution: {integrity: sha512-N4E/BKS+9VsUeD4WLVRU1J2kCOLh+iikBcMtipFcTyL204132vDYHs27zLAVabJYGnhC0dIVGdhg9pbOZiY2TQ==}
     dev: true
 
-  /@vueuse/shared/9.8.2:
+  /@vueuse/shared/9.8.2_vue@3.2.45:
     resolution: {integrity: sha512-ACjrPQzowd5dnabNJt9EoGVobco9/ENiA5qP53vjiuxndlJYuc/UegwhXC7KdQbPX4F45a50+45K3g1wNqOzmA==}
     dependencies:
-      vue-demi: 0.13.11
+      vue-demi: 0.13.11_vue@3.2.45
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
@@ -9970,6 +9963,7 @@ packages:
 
   /csstype/3.1.1:
     resolution: {integrity: sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==}
+    dev: true
 
   /cucumber-html-reporter/5.5.0:
     resolution: {integrity: sha512-kF7vIwvTe7we7Wp/5uNZVZk+Ryozb688LpNvCNhou6N0RmLYPqaoV2aiN8GIB94JUBpribtlq6kDkEUHwxBVeQ==}
@@ -11472,7 +11466,7 @@ packages:
       file-entry-cache: 6.0.1
       find-up: 5.0.0
       glob-parent: 6.0.2
-      globals: 13.17.0
+      globals: 13.19.0
       globby: 11.1.0
       grapheme-splitter: 1.0.4
       ignore: 5.2.0
@@ -12556,13 +12550,6 @@ packages:
     resolution: {integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==}
     engines: {node: '>=4'}
 
-  /globals/13.17.0:
-    resolution: {integrity: sha512-1C+6nQRb1GwGMKm2dH/E7enFAMxGTmGI7/dEdhy/DNelv85w9B72t3uc5frtMNXIbzrarJJ/lTCjcaZwbLJmyw==}
-    engines: {node: '>=8'}
-    dependencies:
-      type-fest: 0.20.2
-    dev: false
-
   /globals/13.19.0:
     resolution: {integrity: sha512-dkQ957uSRWHw7CFXLUtUHQI3g3aWApYhfNR2O6jn/907riyTYKVBmxYVROkBcY614FSSeSJh7Xm7SrUWCxvJMQ==}
     engines: {node: '>=8'}
@@ -22056,28 +22043,6 @@ packages:
     resolution: {integrity: sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==}
     engines: {node: '>=0.10.0'}
 
-  /vue-async-computed/3.9.0:
-    resolution: {integrity: sha512-ac6m/9zxHHNGGKNOU1en8qNk+fAmEbJLuWL7qyQTFuH3vjv3V4urv//QHcVzCobROM6btnaDG2b+XYMncF/ETA==}
-    peerDependencies:
-      vue: ~2
-    dev: false
-
-  /vue-async-computed/3.9.0_vue@2.7.14:
-    resolution: {integrity: sha512-ac6m/9zxHHNGGKNOU1en8qNk+fAmEbJLuWL7qyQTFuH3vjv3V4urv//QHcVzCobROM6btnaDG2b+XYMncF/ETA==}
-    peerDependencies:
-      vue: ~2
-    dependencies:
-      vue: 2.7.14
-    dev: false
-
-  /vue-async-computed/3.9.0_vue@3.2.45:
-    resolution: {integrity: sha512-ac6m/9zxHHNGGKNOU1en8qNk+fAmEbJLuWL7qyQTFuH3vjv3V4urv//QHcVzCobROM6btnaDG2b+XYMncF/ETA==}
-    peerDependencies:
-      vue: ~2
-    dependencies:
-      vue: 3.2.45
-    dev: false
-
   /vue-concurrency/4.0.0:
     resolution: {integrity: sha512-YOLrHang8w15bMOpftw6iPsoqlZT/u5zsblnT+CrVvc2HZ0eP76hjj77sgepHxB6FRcN3dlFXDNBMQ6iZzpiNw==}
     peerDependencies:
@@ -22095,19 +22060,6 @@ packages:
       vue: 3.2.45
     dev: false
 
-  /vue-demi/0.13.11:
-    resolution: {integrity: sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==}
-    engines: {node: '>=12'}
-    hasBin: true
-    requiresBuild: true
-    peerDependencies:
-      '@vue/composition-api': ^1.0.0-rc.1
-      vue: ^3.0.0-0 || ^2.6.0
-    peerDependenciesMeta:
-      '@vue/composition-api':
-        optional: true
-    dev: true
-
   /vue-demi/0.13.11_vue@3.2.45:
     resolution: {integrity: sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==}
     engines: {node: '>=12'}
@@ -22121,7 +22073,6 @@ packages:
         optional: true
     dependencies:
       vue: 3.2.45
-    dev: false
 
   /vue-docgen-api/4.56.0_vue@3.2.45:
     resolution: {integrity: sha512-ab/Scb0DCjm4YVLf+AFa/R7XMFl8TVwUsvh26fFT5iaURih1m2hdd5Y8NveA7NQDcycpWavkFZj9eVbQdp2VGQ==}
@@ -22519,6 +22470,7 @@ packages:
     dependencies:
       '@vue/compiler-sfc': 2.7.14
       csstype: 3.1.1
+    dev: true
 
   /vue/3.2.45:
     resolution: {integrity: sha512-9Nx/Mg2b2xWlXykmCwiTUCWHbWIj53bnkizBxKai1g61f2Xit700A1ljowpTIM11e3uipOeiPcSqnmBg6gyiaA==}