JSFiddle - React, Tailwind, and code Playground

by skirtle

HTML

<div id="app">

</div>

JavaScript

import {createApp,defineComponent,ref,toRefs } from "https://unpkg.com/[email protected]/dist/vue.esm-browser.js";


var Comp2 = defineComponent({
  props: {
    stock: {}
  },
  template: "<p>comp-2 {{ stock }}  {{name}}</p>",
  setup(props) {
   /*  return {...toRefs(props.stock)} */
    return props.stock
    /* return {...props.stock} */
  }
});

var Comp1 = defineComponent({
  props: {
    stock: {}
  },
   components: {
    Comp2
  },
  template: `<p>
  	comp-1 {{ stock }}  {{stock.name}}
    <comp-2 :stock="stock"/>
    </p>
  `
});



const app = createApp({
  template: "App : <comp-1  :stock=\"person\" />",

  setup() {
    var person = ref({
      name: "someone",
      last: "like"
    })

    setTimeout(function() {
      person.value = {
     	  name: "hello",
      	last: "like again"
      }
    }, 3000)

    return {
      person
    }

  },
  components: {
    Comp1,
    Comp2
  }
});

app.mount("#app");