Required props are not present using typescript + vue-property-decorator

[Flyrell]

Hi,

thanks for this amazing lib. I'm using it a lot last few weeks and it looks to be one of the bests open source libs I've used os far.

But, unfortunately, I think I found a little issue similar to #93 and #153. I'm not sure if it has something to do with the vue-property-decorator (I guess so), but the required @Props are not initialised when I first run the web component.

Although, they are bound afterwards, it's not a good thing as a lot of one-time logic is done run without them, which resolves in throwing an errors, etc.

First of all, I can work on the PR for the (new Component()).$options "hack", because I've lost a little while looking for that. But I honestly have no idea what could be causing the issue right now. Would anyone take a time to look at it?

// App.vue - script section

import {Vue, Component} from 'vue-property-decorator';

@Component
export default class App extends Vue {

    /** Width of the component */
    @Prop({ type: Number, required: true }) readonly width!: number;
}

// main.ts
import Vue from 'vue';
import VueCustomElement from 'vue-custom-element';
import App from '@/App.vue';

Vue.use(VueCustomElement);
Vue.customElement('web-component', (new App()).$options);

# build
npm run build -- --target lib --name web-component src/main.ts

<!-- demo -->
<script src="https://unpkg.com/vue"></script>
<script src="path/to/built/web-component.umd.js">

<web-component width="200"></web-component> <!-- Missing required prop: "width" -->

UPDATE While I'm writing this, I realised the issue is that built file is instantiated right after it's loaded (without using an actual <web-component></web-component>), but it also can be instantiated by using the component (which seems weird to me 😄 ). Any ideas why is that so? Thanks

UPDATE 2 Well, now when I look at it, it's obvious (new App()).$options is causing the issue. The question is, is there any way to use it without instantiating the component? Or at least without letting instantiation be built to the final bundle...

[karol-f]

Hi, can You prepare GitHub repository or CodePen demo for the issue? It would be easier to debug the problem.

[karol-f]

About update 2 - unfortunately vue-class-component is changing the component object and this is the way to use it with vue-custom-element.