How to automatically create lists in VueJs?

Question

Vue.js

Hello, please tell
me how to automatically create blocks, lists and so on in VueJs according to the given parameters?

Task:
1)
Imagine there is a list 1
> Select a type:
>>Type 1
>>Type 2

2)
The user has selected Type 1 - this group has its own child elements. They should appear in the new list.
For example:
> Select a group from Type 1
>> Group 1
>> Group 2

and this list should be dynamic.

Quite new to VueJs.

I wrote a small function that creates a select, but I don't think it's right, the function returns the generated select and I append it to the tree, it works, but I don't think it's right.

creatSelect(col, name, title, list){

    let options;

    let div = document.createElement('div');
    div.className = `col-${col} ${name}`;

    for (let i = 0; i < list.length; i++) {
        options += `<option value="${list[i].code}" data-id="${list[i].id}">${list[i].name}</option>`;
    }

    div.innerHTML = `
        <select @change="${name}" :require="true">
            <option disabled :selected="true">${title}</option>
            ${options}
        </select>

    `;

    return div;

}

Answer 1

For example