JSFiddle - React, Tailwind, and code Playground

by BraveOstrich

HTML

<script src="https://unpkg.com/vue"></script>

<div id="app"></div>

JavaScript

const child = {
  inject: ['foo', 'bar', 'rawData', 'vm', 'baz','baz1', 're', 'barDefined'],
  
  template: `<div>
    Const - foo: {{ foo }} <br>
		<h2> Reactive </h2>
    Data $data - (rawData.bar): {{ rawData.bar }} <br>
    Component Instance - vm: {{ vm.bar }} <br>
		<h2> Non-Reactive </h2>
    Data Prop - bar: {{ bar }} <br>
    Computed Prop Primitive - (bar as computed baz1): {{ baz1 }} <br>
    Computed Prop Object - ({ bar }): {{ baz }} <br>
		Computed Prop Object Property - (baz.bar): {{ baz.bar }} <br>
    Defined Reactive - re: {{ re }} <br>
    Defined Prop - barDefined: {{ barDefined }} <br>
	</div>`
}

new Vue({
	el: '#app',
  
  provide () {
  	var wrapper = {}
    const provide =  {
    	foo: 1,
      bar: this.bar,
      rawData: this.$data,
      vm: this,
      baz: this.baz,
      baz1: this.baz1,
      barDefined: wrapper
    }
    
    Vue.util.defineReactive(provide, 're', this.bar)
    
    Object.defineProperty(wrapper, 'barDefined', {
       enumerable: true,
       get: () => this.bar,
    })

		return provide
  },
  
  data () {
    return {
     bar: 2
    }
  },
  
  computed: { baz () { return { bar: this.bar } }, baz1 () { return this.bar } },

	template: `<div>
  	<button @click="bar += 1">++bar</button> 
    Parent:bar - {{ bar }}
    <br>
    Child:
    <child />
  </div>`,
  
  components: { child }
})