How to pass data from parent vue component to child if the latter is its own web component?

Question

Vue.js

Hello. Faced the following problem (Google did not help).

I'm using Vue.js on plain html.

<div id="app">
</div>

...

var app = new Vue({
  el: "#app",
  data: function () {}
  ...
})

Inside the div#app I decided to insert a simpler Vue component.
I decided to use a single-file component for these purposes, because. it is more convenient to work with it (especially writing a template), for example:

<template>
  <div>
   <h1>{{title}}</h1>
   <p>{{obj.id}}</p>
   ...
  </div>
</template>

<script>
export default {
  name: "MyComponent",
  props: {
  title: {
    type: String
  },
    obj: {
      type: Object
    },
    arr: {
      type: Array
    }
  }
};
</script>

Next, using the vue-cli-service build --target wc --name my-component ./src/components/MyComponent.vue command, I translate it into a web component and include it on the page after including the Vue.js library itself as a regular js- script.
Then I insert div#app tags inside

<div id="app">
  <my-component v-bind:text="title" v-bind:obj="objOne" v-bind:arr="arrTest"></my-component>
</div>

Next, in one of the methods of the main application, I get some data (title, objOne, arrTest) and pass it to the my-component component.

The problem is that inside the component why all passed values ​​come as strings, for example the obj property turns into the string '[Object object]'.

The question arises, how to correctly pass data to the received component?

Thank you.

Answer 1

google https://github.com/vuejs/vue-web-component-wrapper...
:obj.prop="objOne" as they say
or it's in the vue-custom-element plugin