import Vue from 'vue'
import wrap from '@vue/web-component-wrapper'

const Component = () => new Promise(resolve => {
    setTimeout(() => {
      resolve({
        template: `<div>The value is - {{ foo.value }}</div>`,
        props: {
          foo: {
            type: Object,
            default: () => ({ value: 'banana' })
          }
        }
      })
    }, 100)
})

customElements.define('my-element', wrap(Vue, Component))

const myElement = document.createElement('my-element')

document.body.appendChild(myElement)

myElement.foo = { value: 'apple' }