Subscribe on changes!

different results using mount and instance data undefined

avatar
Sep 29th 2021

Version

3.2.19

Reproduction link

jsfiddle.net/8n02afhr/

Steps to reproduce

When using the following code, the console.log prints 1 as expected:

<script src="https://unpkg.com/vue@next"></script>
<div id="app">
</div>
<script>
 // direct instance creation
 const data = {
   a: 1
 }
 // The object is added to a component instance
 const vm = Vue.createApp({
   data: function () {
     return data;
   }
 }).mount('#app');
 console.log('vm', vm.a); // => 1
</script>

However when the mount is done separately, the console.log is "undefined":

<script src="https://unpkg.com/vue@next"></script>
<div id="app">
</div>
<script>
 // direct instance creation
 const data = {
   a: 1
 }
 // The object is added to a component instance
 const vm = Vue.createApp({
   data: function () {
     return data;
   }
 });
 vm.mount('#app');
 console.log('vm', vm.a); // => undefined
</script>

What is expected?

Both code snippets have the same behavior.

What is actually happening?

Mounting the app in a separate step does not expose the instance data.

avatar
Sep 30th 2021

@unuseless Your first demo's vm is the return of mount, but your second demo's vm is the return of Vue.createApp. https://v3.vuejs.org/api/application-api.html#mount

avatar
Sep 30th 2021

@ygj6 Thanks for closing the issue and including the link.