vue js 2: Access props in mounted function

A common mistake could be, parent component pass a variable as a prop which is null at the moment where child component get rendered. Thus when you access it in mounted in child component. You see it as a null value. And at a later time, in Parent component the variable which was passed (prop) will be assign the values from an asynchronous operation. To avoid possible pitfalls, better to use v-if.

Example :

<ChildComponent :data="testData" />

instead of above below can be used

<ChildComponent v-if="testData" :data="testData" />

so that only when testData available child component will be rendered. But if in child component you have some more things to show until data comes in better to use another component. And adding watchers will also resolve the problem but not in a pretty way.

Since you get values in updated hook probably this could be the case.

Why are you trying to access current component props through '$parent'?

It should work like this:

 module.exports = {  props: ["Subscriptions"],  mounted: function () {      let vm = this;      Vue.nextTick(function () {        console.log(vm.Subscriptions);      });  },    beforeUpdate() {    console.log(this.Subscriptions);  },  updated() {    console.log(this.Subscriptions);  }};

Update:

Anyway, I don't know if you need next tick, try to use created function and without nextTick.

created() {  alert(this.Subscriptions);},

I resolved a similar issue using @watch. Maybe this could work?

module.exports = {  props: ["Subscriptions"]  // this mounted is probably not necessary  mounted: function () {    getSubscriptions(this.Subscriptions)  },    watch: {    Subscriptions: [{      handler: 'getSubscriptions'    }]  },  methods: {    getSubscriptions(el) {      console.log(el);    }  }};