Dialog not apper using v-show

[kaizoku2508]

Im trying to popup a login dialog but the problem i cannot make appear even I set it ‘true’. below is my two components that appear on main layout.

login components:

<template>
  <div v-show="true">
    <q-dialog>
        <q-card>
          <q-card-section>
            <q-form class="q-gutter-md" style="width: 400px">
              <h4 class="text-h4 text-primary q-my-auto text-weight-medium">Login</h4>
              <q-input
              filled
              :error="state.error"
              label="Your email *"
              lazy-rules
              :rules="[ required, email ]"
              />

              <q-input
                filled
                v-model="state.doc.password"
                :error-message="state.error ? 'Incorrect email or password' : 'Field is Required'"
                :error="state.error"
                :type="state.showPassword ? 'text' : 'password'"
                label="Password *"
                lazy-rules
                :rules="[ required ]">
                <template v-slot:append>
                  <q-icon
                  :name="state.showPassword ? 'visibility' : 'visibility_off'"
                  class="cursor-pointer"
                  @click="state.showPassword = !state.showPassword" />
                </template>
              </q-input>

            <div style="margin-top: 40px;" class="q-gutter-x-sm">
              <q-btn label="Login" type="submit" color="primary"/>
              <q-btn flat to="/user/requestpassword" label="Forgot Password?" type="submit" />
            </div>
          </q-form>
        </q-card-section>
      </q-card>
    </q-dialog>
  </div>
</template>

<script>
import { defineComponent, reactive } from 'vue'
import { setCookie } from 'tiny-cookie'
import { globalState } from '../util'
import { useRouter } from 'vue-router'
import axios from 'axios'
const emailPattern = /^(?=[a-zA-Z0-9@._%+-]{6,254}$)[a-zA-Z0-9._%+-]{1,64}@(?:[a-zA-Z0-9-]{1,63}\.){1,8}[a-zA-Z]{2,63}$/
export default defineComponent({
  setup () {
    const router = useRouter()
    const state = reactive({
      doc: {},
      showPassword: false,
      error: false
    })

    function onSubmit () {
      const apiUrl = '/api/login'
      state.doc.email = state.doc.email.trim()
      state.doc.password = state.doc.password.trim()
      axios.post(apiUrl, state.doc)
        .then(res => {
          console.log(res)
          if (res && res.data) {
            setCookie('Test123', JSON.stringify({
              username: res.data.email,
              password: res.data.password,
              database: res.data.database,
              phone: res.data.phone,
              auth: true
            }), { expires: '8h' })
            globalState.database = res.data.database
            globalState.username = res.data.email
            globalState.email = res.data.email
            globalState.phone = res.data.phone
            router.push({ path: '/' })
          }
        })
        .catch(err => {
          console.error(err)
          state.error = true
          setTimeout(() => {
            state.error = false
          }, 2000)
        })
    }

    function onReset () {
      state.doc = {}
    }

    return {
      onSubmit,
      onReset,
      state,
      email: (v) => emailPattern.test(v) || 'Invalid email',
      required: (v) => !!v || 'Field is Required'
    }
  }
})
</script>

other components that call login component as dialog:

<template>
  <LoginComponents />
</template>

<script>
import { defineComponent } from 'vue'
import LoginComponents from 'components/LoginComponents'
export default defineComponent({
  components: {
    LoginComponents
  }
})
</script>

[dobbel]

@kaizoku2508

Use the v-model to show the dialog like this:

 <q-dialog v-model="showDialog"
...
showDialog = true  // set to true will show dialog