Vite and Vue3 not working on MiuiBrowser ver 10.9.8-g on Redmi Note 5 real device

Question

Blank page with no Dom and some bugs when trying to open windows with MiuiBrowser on Redmi note 5 as you can see in these pictures, please take your time and give me some advice to resolve this problem with vite and vue3.

//My component

<script setup>
import RechargePhoneItem from '@/components/RechargePhoneItem.vue'
import { useGlobalStore } from '@/stores/global.js'
import { useOrderStore } from '@/stores/order.js'
import { isEmpty } from '@/lib/common.js'
import { checkCustomerV2 } from '@/api'
import { onMounted, ref, watch } from 'vue'
import router from '@/router'

const global = useGlobalStore()
const order = useOrderStore()

const dataUser = ref(null)

async function getUserInformation() {
  try {
    if (import.meta.env.MODE !== 'development') {
      global.showLoading()
      const data = await window.sdk.getUserInfo()
      const { id, phone } = data
      const {statusCode, data: dataRes} = await checkCustomerV2({
        phoneNumber: phone,
        fptplayId: id,
        customer_name: "",
        token: ""
      })

      if(statusCode === 200) {
        global.setUserInfo({
          ...data,
          phone: dataRes?.phone_number.trim(),
          id: dataRes?.uid
        })

        dataUser.value = {
          ...data,
          phone: dataRes?.phone_number.trim(),
          id: dataRes?.uid,
        }
        global.hideLoading()
      }
    } else {
      dataUser.value = {
        phone: '0968790025',
        id: '343'
      }
      global.setUserInfo(dataUser.value)
    }
  } catch (error) {
    global.hideLoading()
    if(error.code === 100) return
    order.setDataTransaction({message: error.message})
    router.push('/card/error-order')
    console.log(error);
  }
}

function handleEventKey(e) {
  if (import.meta.env.MODE !== 'development' && e.keyCode === window.sdk.keys.backspace && router?.currentRoute?.value?.name === 'RechargePhone' && !global.isModal) {
    window.sdk.destroy()
    return
  } else {
    global.showModal(false)
    return
  }
}

watch(
  () => global.userInfo,
  (val, oldVal) => {
    dataUser.value = val
    global.setUserInfo(val)
  },
  { deep: true }
)

onMounted(() => {
  if (!window.sdk) alert('close')
  if (!dataUser.value || isEmpty(dataUser.value)) getUserInformation()
  global.setService('Nạp tiền điện thoại')
  document.addEventListener("keydown", handleEventKey)
})
</script>

<template>
  <RechargePhoneItem v-if="dataUser" :dataUser="dataUser" />
</template>
<style lang="scss"></style>

//vite config 

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'

// https://vitejs.dev/config/
process.env.BROWSER = "chrome"
export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

//Routing

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/card/nap-tien-dien-thoai',
      name: 'RechargePhone',
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import('@/views/RechargePhone.vue')
    },
    {
      path: '/card/history-transaction',
      name: 'HistoryTransaction',
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import('@/views/HistoryTransaction.vue')
    },
    {
      path: '/card/order-confirm',
      name: 'DetailTransaction',
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import('@/views/DetailTransaction.vue')
    },
    {
      path: '/card/payment-methods',
      name: 'PaymentMethods',
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import('@/views/PaymentMethods.vue')
    },
    {
      path: '/card/payment-manages',
      name: 'PaymentManages',
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import('@/views/PaymentManages.vue')
    },
    {
      path: '/card/success',
      name: 'SuccessOrder',
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import('@/views/SuccessOrder.vue')
    },
    {
      path: '/card/error-order',
      name: 'ErrorOrder',
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import('@/views/ErrorOrder.vue')
    },
    {
      path: '/card/pending-order',
      name: 'PendingOrder',
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import('@/views/PendingOrder.vue')
    },
    {
      path: '/card/error-network',
      name: 'ErrorPage',
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import('@/views/ErrorPage.vue')
    },
    {
      path: '/card/support',
      name: 'Support',
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import('@/views/Support.vue')
    },
    {
      path: '/card/credit-card',
      name: 'CreditCard',
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import('@/views/CreditCard.vue')
    },
    {
      path: '/card/receiver',
      name: 'ReceiverCard',
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import('@/views/ReceiverCard.vue')
    },
    {
      path: '/card/check-transaction',
      name: 'CheckTransaction',
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import('@/views/CheckTransaction.vue')
    }
  ]
})

export default router

Expected: View Dom Element