JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <encapsulated-component inline-template>
        <header>
            <cart-status></cart-status>
        </header>
        <cart></cart>
        <item some-prop="1"></item>
        <item some-prop="2"></item>
        <item some-prop="3"></item>
    </encapsulated-component>
</body>

JavaScript

Vue.component(
  'encapsulated-component',
  {
    data: function() {
        return	{
           total: 20
        }
    }
  }
);

Vue.component(
  'cart-status',
  {
    inherit: true,
    template: '<p><b>cart-status:</b> {{total}}</p>',
  }
);

Vue.component(
  'cart',
  {
    inherit: true,
    template: '<p><b>cart:</b> {{total}}</p><ul> <li v-repeat="items">{{title}}</li> </ul><button v-on="click: increaseTotal">inc</button>',
    data: function() {
      return {
        items: [{title: "t1"}, {title: "t2"}]
      }
    },
    methods: {
        increaseTotal: function(){
        	 this.$parent.total += 20;
        }
  	}      
  }
);

Vue.component(
  'item',
  {
    props: ['someProp'],
    template: '<p>I am item #{{someProp}}</p>',
  }
);


var vue = new Vue({
    el: 'body'
});