Vue Web Component converts all props into string

[onurusluca]

Hi! I am making a web component to be embedded inside another website.
Problem is that even though I set the search-on-load as boolean, I get it as string. Happens with numbers too.
Error:
[Vue warn]: Invalid prop: type check failed for prop "searchOnLoad". Expected Boolean, got String with value "true".

Vue docs says this should work:
https://vuejs.org/guide/extras/web-components.html#props

Web component usage:

<mf-search-box
      submit-button-text="Search"
      search-on-load
  ></mf-search-box>

Props:(SearchBox.vue)

 searchOnLoad: {
    type: Boolean,
    default: false
  }

Web Component definitions:(main.ts)

const components = [
  { name: 'SearchBox', component: SearchBox },
...
]

components.forEach(({ name, component }) => {
  const formattedName = 'mf' + name.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase()
  const CustomElement = defineCustomElement(component)
  customElements.define(formattedName, CustomElement)
})

Web Component settings(vite.config):

 vue({
      customElement: true,
      template: {
        compilerOptions: {
          isCustomElement: (tag) => tag.includes('mf-')
        }
      }
    }),

I believe this to be an internal bug? If there is no solutions I will make this into an issue.
Thank you!

[adambartosiewicz]

I have the same issue. I noticed that properties with multi-word names in kebab case (like search-on-load) are treated as attributes and are converted to string. If I use camel casing ('searchOnLoad`), the property works as expected. Most examples on the web (including those in the official docs) contain single-word property names so those examples work just fine.

Am I doing something wrong or is this the expected behavior?

@onurusluca have you found a solution for your issue?