Why doesn't it display the value of $root everywhere in the component?

Question

Vue.js

I am a little familiar with Vue and have noticed strange behavior.
There is:

new Vue({
    el: '#app',
    created: function(){
      this.getCategories();
    },
    data:{
      content: 'что-то',
...
...

and a separate component:

var VueModal = Vue.extend ({
  template: `<div v-if="$root.modalContent">
                <div>
                  <input type="text" value="{{$root.content}}">
                </div>
                {{$root.content}}
              </div>
...
...

As a result, the output is like this:

<div>
  <div>
    <input type="text" value="{{$root.content}}">
  </div>
  что-то
</div>

Why is the value not rendered in value, but below everything is ok?

Answer 1

First, interpolation with attributes does not work, value binding is done differently .
Secondly, you DO NOT need to touch $root. If you want to use an external value, pass it to the component as a parameter or get it from the storage .