JSFiddle - React, Tailwind, and code Playground

by Simon Herteby

HTML

<div id="vue">
  <child></child>
  <div ref="test">
    Test
  </div>
</div>

JavaScript

new Vue({
  el: '#vue',
  provide() {
    return {
      test: () => this.$refs.test
    }
  },
  components: {
    child: {
      template: `<div>Child<grandchild></grandchild></div>`,
      inject: ['test'],
      mounted() {
        console.log(this.test())
      },
      components: {
        grandchild: {
          template: `<div>grandchild</div>`,
          inject: ['test'],
          mounted() {
            console.log(this.test())
          },
        }
      }
    }
  }
})