Storing drag & drop content and order

I'm building a drag & drop form editor. I was thinking that all different form fields, like checkbox, textfield etc. could be different components. Then I can keep track of the different components in the array and show them like in example below.

It's easy to add and change the order of the components dynamically. But I'm having hard time figuring out how to how loop thru the Items array and access the component inside it when I would like to store it to database. How do I get component inside the list item (build the connection)? Or is there better way to do this?

Items array:

data: {
    items: [
        {type: 'checkbox-component'},
        {type: 'textfield-component'},
        {type: 'textfield-component'},
    ]
}

View:

<ul>
    <li v-for="item in items">
        <template v-if="item.type == 'checkbox-component'">
                        <checkbox-component></checkbox-component>
        </template>
        <template v-if="item.type == 'textfield-component'">
                        <textfield-component></textfield-component>
        </template>
    </li>
</ul>