JSFiddle - React, Tailwind, and code Playground

by skirtle

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>
<div id="app">
  <my-child :a="theObject"></my-child>
</div>

JavaScript

const MyChild = {
  template: `<div></div>`,
  
  props: {
    a: Object,

		b: {
      type: Object,

			default () {
        return { name: 'default' }
      }
    }
  },
  
  setup (props) {
    console.log(props.a)
    console.log(Vue.isReactive(props.a))
    
    console.log(props.b)
    console.log(Vue.isReactive(props.b))
  }
}

const anObject = { name: 'an object' }

Vue.createApp({
  components: {
    MyChild
  },
  
  computed: {
    theObject () {
      return anObject
    }
  }
}).mount('#app')