Async component doesn't get initial props which are passed as element properties

[maksvoloshyn]

With async components, it's impossible to pass props through element properties (useful for objects) before the component is loaded and initialized.

Example:

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' }

Expected result:

The value is - apple

Actual result:

The value is - banana

It happens because the wrapper doesn't sync already defined element's properties with a component, but expects them to be passed after. It's the only possible flow for synchronous components but with async ones, it should be expected to have properties defined before a component is resolved.

PR with the possible fix will follow this issue