[Vuetify] Unable to locate target [data-app]

[laurent-brisbois]

Hello there !

const router = new Router({
  //...
})

I have a beforeEach statement in my vue router that does this :

router.beforeEach(async (to, from, next) => {
  const isLoggedIn = getIsLoggedIn()
  // ...
  }
  if (to.meta.requiresAuth) {
    if (isLoggedIn) {
      // ...
    } else {
      let res = await router.app.$dialog.show(WarningModal, {
        persistent: true,
        waitForResult: true,
        icon: 'login',
        title: 'Warning: Login Required',
        message: 'Your session may have expired.',
        advice: 'Please log again and retry.',
        okColor: 'primary',
        okHandler: function () {
          return new Promise(resolve => {
            resolve()
          })
        }
      })
      if (res) {
        handleUnloggedStatus()
        router.push({ name: 'LoginForm' })
      }
    }
  } else {
    next()
  }
})

With the WarningModal modal being :

<template>
  <DialogCard :actions="actions">
    <v-toolbar
      flat
      dark
      color="warning">
      <v-toolbar-title>
        <v-icon left>mdi-{{ icon }}</v-icon>
        {{ title }}
      </v-toolbar-title>
    </v-toolbar>
    <div class="pa-4 subtitle-1">
      <div>{{ message }}</div>
      <div
        v-if="advice"
        class="mt-3">
        {{ advice }}
      </div>
      <v-checkbox
        v-if="checkRequired"
        v-model="checked"
        :label="checkMessage"
        dense/>
    </div>
  </DialogCard>
</template>

And when I start my app on a URL that requiresAuth, if I'm not logged in it tries to display the modal, which fails. If I first login and do things, the modal is usable as normal because I use it for other purposes such as asking confirmation before a delete.

How can I solve this problem here ? Since it doesn't seem to be able to find v-app properly I think ?