JSFiddle - React, Tailwind, and code Playground

by M. Reza Zerehpoosh

HTML

<div id="app">
  <my-textarea v-model="text1" placeholder="Type Foo here"></my-textarea>
  <my-textarea v-model="text2"></my-textarea>
</div>

JavaScript

window.Event = new Vue();

Vue.component('my-textarea', {
	template: `
  	<textarea :value="value" 
    					@input="updateValue($event.target.value)"
              :placeholder="placeholder"
    					ref="input"
    >
    </textarea>`,
  props: {
  	value: { default: '' },
    placeholder: { default: '' }
  },
  methods: {
  	updateValue(value) {
      // adding v-model support to this reusable component
      this.$refs.input.value = value;
      this.$emit('input', value);
          
       // Firing an event via Event bus to notify sibling reusable component
       Event.$emit('valueChanged', this._uid, value);
     }
  },
  
  mounted() {
  	Event.$on('valueChanged', (id, value) => {
    	if (id != this._uid) {
      	if (value === 'Foo') {
        	this.$refs.input.value = 'Bar';
        }
      }
    }); 
  }
  
});

new Vue({
	el: '#app',
  data() {
  	return {
    	text1: '',
      text2: ''
    }
  }

});