JSFiddle - React, Tailwind, and code Playground

by acdcjunior

HTML

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

<div id="app">
  <p>At Parent: <input v-model="variableAtParent"> &lt;-- EDIT THIS and notice child reacts to changes</p>
  <child-comp :message="arr"></child-comp>
  
  <hr>
  <p>Array at parent: {{ arrayAtParent }}</p>
  <button @click="replaceWholeArray">replace Whole Array at parent</button>
  <child-comp :message="arrayAtParent"></child-comp>
</div>

JavaScript

Vue.component('child-comp', {
  props: ['message'], // declare the props
  template: '<p>At child-comp, using props in the template: {{ message }}</p>',
  mounted: function () {
    console.log('The props are also available in JS:', this.message);
  }
})

new Vue({
  el: '#app',
  data: {
    variableAtParent: 'DATA FROM PARENT!',
    arrayAtParent: [1, 'original value', 2]
  },
  computed: {
    arr() { return this.variableAtParent.split(""); }
  },
  methods: {
  	replaceWholeArray() {
    	this.arrayAtParent = [3, 'replaced value', 4]
    }
  }
})