JSFiddle - React, Tailwind, and code Playground

by jswenjie

HTML

<div id="app">
   <validate v-for="x in 2" :key="x" v-slot="{ error }">
     in scope {{ error }} {{ sendToParent(error, x-1) }}
   </validate>
   <div>in parent {{ error }}</div>
 </div>

Vue

Vue.component("validate", {
  data() {
    return {
      error: false
    };
  },
  mounted: function() {
    setInterval(() => (this.error = Date.now()), 1000);
  },
  template: '<div><slot :error="error" /></div>'
});

new Vue({
  el: "#app",
  data() {
    return {
      error: []
    };
  },
  methods: {
    sendToParent(error, index) {
      this.$set(this.error, index, error);
    }
  }
});