Vue: [Vue warn]: Unhandled error during execution of mounted hook / TypeError: Cannot read properties of undefined (reading 'x')
An exception was thrown inside a lifecycle hook, watcher, event handler or render, and Vue logs it with the context.
[Vue warn]: Unhandled error during execution of mounted hook[Vue warn]: Unhandled error during execution of setup function[Vue warn]: Unhandled error during execution of native event handler[Vue warn]: Unhandled error during execution of render function[Vue warn]: Unhandled error during execution of watcher callback Meaning
The real cause is the error that follows (TypeError, network error). Read the stack, fix the undefined access (data not loaded, wrong ref), wrap async calls in try/catch, and add app.config.errorHandler / onErrorCaptured for reporting.
Common causes
undefineddata accessed in setup/mounted- Async function errors unhandled
- Ref accessed before mount
- Wrong prop usage
- Third-party lib errors
⚡ Quick fix
- Read the TypeError below the warning and fix that line
- try/catch around async work
- Set
app.config.errorHandlerto log centrally
Detailed fix by platform
Vue
app.config.errorHandler = (err, instance, info) => { console.error(info, err); };
How to diagnose
- Hook — Which?
- Error — Below the warning?
- Handler — Configured?
🔧 Still not fixed?
Many errors look alike. If the steps above didn’t solve it, one of these is probably what you’re facing:
Similar errors
- [Vue warn]: Error in v-on handler / Error in mounted hook (Vue 2) Vue 2: [Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'x' of undefined"
- [Vue warn]: Failed to locate Teleport target with selector Vue: [Vue warn]: Failed to locate Teleport target with selector "#modal". Note the target element must exist before the component is mounted
- [Vue warn]: Maximum recursive updates exceeded Vue: [Vue warn]: Maximum recursive updates exceeded in component <Foo>. This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself
Most viewed in Vue
- Failed to resolve component Vue: [Vue warn]: Failed to resolve component: x
- Avoid mutating a prop directly Vue: [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders
- Nuxt: window/document/localStorage is not defined (SSR) Nuxt: ReferenceError: window is not defined / 500 Internal Server Error during SSR
Other ways to find it
Where this error sits
Origin: On your device. Errors that are often confused with or caused by this one (click to open):
🧠 Still stuck? Analyze your error
Paste the full message, response headers or stack trace — we'll detect the platform and point to the most likely cause.
💬 What worked for others
No tips yet — did something else fix this for you?
Share what worked for you
Tips are checked by an editor before they appear. Links are removed.
Report a correction or suggest an improvement
Last updated 5 Nov 2026