How to pass props array into a child component array in Vue

Just make mutableRoles a prop in your child component and pass it that way

// parent component
<child-component :mutable-roles="userdata"></child-component>

// child-component
...
    props: ['mutableRoles']
...

@REALRANDYALLEN - no, i want to copy into another array. just like this:

this.mutableRoles=this.userdata

@MAJEED - That’s basically what you are doing with the method I suggested

@REALRANDYALLEN - that's working, but when i select new value it's shows a warning: [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders.

@MAJEED - Yes, I should have had you do this slightly different, but easy fix:

// parent component
<child-component :mutable-roles="roles"></child-component> //reference your data property rather than your prop

export default {
    props: {
        userdata: {
            type: [Array, Object],
            required: true
        }
    },

    data() {
        return {
            roles: this.userdata // data property named 'roles', or name it whatever you want, just be sure to also change above where you add your child-component
        }
    }
}

// child-component
...
    props: ['mutableRoles']
...