Having a v-if on component of which value changes on mounted, returns TypeError.

[matthijs88]

Versions

• nuxt: v2.15.4
• node: 15.1.0

A TypeError occurs when a variable that is changed on mounted() is linked to a v-if of a component.

Reproduction

The following code returns an error in the browser.
~/pages/bar.vue

<template>
  <div>
    <Foo v-if="loading" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      loading: true
    }
  },
  mounted() {
    this.loading = false
  }
}
</script>

~/components/Foo.vue

<template>
  <div>Loading</div>
</template>

Error in browser:

TypeError: Cannot read property 'resolved' of undefined
    at patchVnode (vue.runtime.esm.js?2b0e:6284)
    at updateChildren (vue.runtime.esm.js?2b0e:6193)
    at patchVnode (vue.runtime.esm.js?2b0e:6319)
    at VueComponent.patch [as __patch__] (vue.runtime.esm.js?2b0e:6482)
    at VueComponent.Vue._update (vue.runtime.esm.js?2b0e:3948)
    at VueComponent.updateComponent (vue.runtime.esm.js?2b0e:4060)
    at Watcher.get (vue.runtime.esm.js?2b0e:4479)
    at Watcher.run (vue.runtime.esm.js?2b0e:4554)
    at flushSchedulerQueue (vue.runtime.esm.js?2b0e:4310)
    at Array.eval (vue.runtime.esm.js?2b0e:1980)

This error doesn't occur when the v-if="loading" is applied to a div.

Applying a timeout of 2000ms before running this.loading = false in mounted did not solve the problem.

[stale]

Thanks for your contribution to Nuxt!
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you would like this issue to remain open:

1. Verify that you can still reproduce the issue in the latest version of nuxt-edge
2. Comment the steps to reproduce it

Issues that are labeled as pending will not be automatically marked as stale.