vuejs props declare prop with multiple types

<template>
  <div>
    <ChildComponent :data="myData" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      myData: {
        value: 'Hello, World!',
        type: 'string'
      }
    };
  }
};
</script>

<script>
// ChildComponent.vue

export default {
  props: {
    data: {
      type: [String, Object],
      required: true,
      validator: function(value) {
        if (typeof value === 'string' || (typeof value === 'object' && value !== null)) {
          return true;
        }
        console.error('Invalid prop: "data" must be a string or non-null object.');
        return false;
      }
    }
  },
  template: `
    <div>
      <p>{{ data.value }}</p>
      <p>Type: {{ data.type }}</p>
    </div>
  `
};
</script>