properly implement resettableAsyncComponent

src/components/async_component_error/async_component_error.vue

@@ -19,6 +19,7 @@
 
 <script>
 export default {
+  emits: ['resetAsyncComponent'],
   methods: {
     retry () {
       this.$emit('resetAsyncComponent')

src/components/settings_modal/settings_modal.js

@@ -56,8 +56,8 @@ const SettingsModal = {
     SettingsModalContent: getResettableAsyncComponent(
       () => import('./settings_modal_content.vue'),
       {
-        loading: PanelLoading,
-        error: AsyncComponentError,
+        loadingComponent: PanelLoading,
+        errorComponent: AsyncComponentError,
         delay: 0
       }
     )

src/services/resettable_async_component.js

@@ -1,5 +1,4 @@
-// TODO investigate if even necessary since VUE3
-import { reactive } from 'vue'
+import { defineAsyncComponent, shallowReactive, h } from 'vue'
 
 /* By default async components don't have any way to recover, if component is
  * failed, it is failed forever. This helper tries to remedy that by recreating
@@ -9,23 +8,21 @@ import { reactive } from 'vue'
  * actual target component itself if needs to be.
  */
 function getResettableAsyncComponent (asyncComponent, options) {
-  const asyncComponentFactory = () => () => ({
-    component: asyncComponent(),
+  const asyncComponentFactory = () => () => defineAsyncComponent({
+    loader: asyncComponent,
     ...options
   })
 
-  const observe = reactive({ c: asyncComponentFactory() })
+  const observe = shallowReactive({ c: asyncComponentFactory() })
 
   return {
-    functional: true,
-    render (createElement, { data, children }) {
+    render () {
       //  emit event resetAsyncComponent to reloading
-      data.on = {}
-      data.on.resetAsyncComponent = () => {
+      return h(observe.c(), {
+        onResetAsyncComponent () {
           observe.c = asyncComponentFactory()
-        // parent.$forceUpdate()
         }
-      return createElement(observe.c, data, children)
+      })
     }
   }
 }