As far as I know, you should not need events to pass data from parent to child.

All you need is, in the child component: props: ['theProp']

And when using the child component in the parent: <child :theProp="someData"></child>

Now, wherever in the parent you change someData, the child component will react accordingly.

You don't need events, you don't need "watch", you don't need "ready".

For example: after an AJAX call, in the parent's "ready", you load some data:

// at the parent componentdata: function () {  return {    someData: {}  }},ready: function () {  var vm = this;  $.get(url, function(response) {    vm.someData = response;  });}

Now, you do not need anything else to pass the data to the child. It is already in the child as theProp!

What you really need to do is to have, in the child, something which reacts to data changes on its own theProp property.

Either in the interface:

<div v-if="theProp.id > 0">  Loaded!</div>

Or in JavaScript code:

// at the child componentcomputed: {  // using a computed property based on theProp's value  awesomeDate: function() {    if (!this.theProp || (this.theProp.length === 0)) {      return false;    }    if (!this.initialized) {      this.initCalendar();    }    return this.theProp.someThing;  }}

Update 1

You can also, in the parent, render the child conditionally:

<child v-if="dataLoaded" :theProp="someData"></child>

Only set dataLoaded to true when the data is available.

Update 2

Or maybe your issue is related to a change detection caveat

Maybe you're creating a new property in an object...

vm.someObject.someProperty = someValue

...when you should do...

vm.$set('someObject.someProperty', someValue)

...among other "caveats".

Update 3

In VueJS 2 you are not restricted to templates. You can use a render function and code the most complex rendering logic you want.

Update 4 (regarding OP's edit 2)

Maybe you can drop ready and use immediate option, so your initialization is in a single place:

watch: {  someData: {    handler: function (someData) {      // check someData and eventually call      this.initCalendar();    },    immediate: true  }}

It's because tricky behavior in Vue Parent and Child lifecycle hooks.

Usually parent component fire created() hook and then mount() hook, but when there are child components it's not exactly that way: Parent fires created() and then his childs fire created(), then mount() and only after child's mount() hooks are loaded, parent loads his mount() as explained here. And that's why the prop in child component isn't loaded.

Use mounted() hook instead created()

like that https://jsfiddle.net/stanimirsp5/xnwcvL59/1/

solution (testing ok)

In child component just using the props data, no need to re-assignment props's values to data, it will be cause update bug!

vue child component props update bug & solution

https://forum.vuejs.org/t/child-component-is-not-updated-when-parent-component-model-changes/18283?u=xgqfrms