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 </p>
  <child-comp :message="arr"></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!'
  },
  computed: {
    arr() { return this.variableAtParent.split(""); }
  }
})