[Vuejs]-How to pass global variable from parent to child in Vuejs?

You can use props.

<component-1 v-bind:message="mydata"></component-1>

Then in your child component (directly from the docs):

Vue.component('component-1', {
  // declare the props
  props: ['message'],
  // just like data, the prop can be used inside templates
  // and is also made available in the vm as this.message
  template: '<span>{{ message }}</span>'
})

Rather than using props (which might mean you have to pass around those props a lot) you can access variables using $parent (or $root)

Vue.component('component-1', {
  computed: {
    message: function(){
      // this is how to access the variable inside the component code
      return this.$parent.message;
    },
  },
  // and because of using computed, access it inside the template
  template: '<span>{{ message }}</span>'
})

You just importing some not inherited components, so you can’t share data like that.
Add components into components field in parent component like here:
https://v2.vuejs.org/v2/guide/components.html#Local-Registration
Then in child components you can use this.$parent. And this.$parent.mydata in your example