Vue.js: Passing Object with Symbol type value with v-bind

I’m trying to pass an object using v-bind to my component:

<MyComponent v-bind="myObject" />

My object is using Symbols for some of the values:

{
  name: 'myCar',
  type: Symbol('sedan'),
}

Vue throws an error when trying to render this component:

Uncaught TypeError: Cannot convert a Symbol value to a string

If I replace the value for myObject.type with a string, there is no longer an error.

I’m also able to pass the object fields separately without any issue:

<MyComponent :name="myObject.name" :type="myObject.type" />

Does Vue.js not support Symbol object values as props?

Answer

This should only happen if you specifically declared type‘s prop type as String. Then it would expect a string but would get a symbol instead. Change type‘s type in MyComponent to Symbol and it should work:

props: {
    type: {
        type: Symbol
    },
    name: {
        type: String
    }
}

Or there is somewhere else where you are trying to implicitly convert the Symbol to a String where it is not supported (without seeing your component code, we could only guess where that might be.)