$parent and $root in Vue js

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
<div id="app" class="container">


  
  <!-- Locally Registered Component -->
  <local-component test="fooboo"></local-component>

</div>

JavaScript

// Locally Registered Component
var testComp = {
  props: ["test"],
  template: `
    <div class="local-component">
      <div class="row">
        <div class="col-xs-12">
          <p>{{test}}</p>
          <p>Parent name: {{$parent.name}}</p>
          <p>Root heading: {{$root.heading}}</p>
          <p>Root college: {{$root.college}}</p>
          <button @click="$root.sayHello('Kishan')">Click me</button>
        </div>
      </div>
    </div>
  `
};
var localComponent = {
  props: ["test"],
  data: function() {
    return {
      name: "Kishan"
    }
  },
  template: `
    <div class="local-component">
      <div class="row">
        <div class="col-xs-12">
          <test-component></test-component>
        </div>
      </div>
    </div>
  `,
  components: {
    // <local-component> will only be available in this parent template
    "test-component": testComp
  },
};

// Vue Instance
new Vue({
  el: "#app",
  components: {
    // <local-component> will only be available in this parent template
    "local-component": localComponent
  },
  data: function() {
    return {
      heading: "Vue.js 2.0 Component Example"
    }
  },
  computed: {
    college () {
      return 'Test College';
    }
  },
  methods: {
    sayHello (name) {
      alert('Hello ' + name)
    }
  }
});