Props are not properly inherited from mixins / extended components

[philipfeldmann]

I'm having a bunch of components that all share some properties, so I've moved them into a mixin (also tried with extending from a parent component).

The prop binding works perfectly when using the component normally, in an SPA for example. When building it as a webcomponent though, the prop binding will no longer be recognized: The component is still able to access the prop attribute correctly, but will always chose the default value - or undefined if no default is provided.

Example:

Mixin:

export default {
props: {
    theme: {
      type: String,
      default: 'defaultTheme',
    }
  },
}

MyComponent:

<template>
  <div>{{ theme }}</div>
</template

<script>
export default {
  name: 'Test',
  mixins: [theme],
}
</script>

Using the Webcompenent:

<webcomponent-test theme="custom"></webcomponent-test>
This will display 'defaultTheme' instead of 'custom'.
When adding the prop directly to the component it works fine though.

[karol-f]

It's not pretty solution, but meanwhile you can

import themeMixin from './theneMixin';

<script>
export default {
  name: 'Test',
  props: {...themeMixin.props}
}
</script>

You can also lodash merge on the whole "export default" object

[aradt]

Following...
this can be a good feature with .sync

[m-mohr]

Wow, this is a really annoying bug. Just spent half a day trying to figure out why my component misbehaved. It was this bug!