I have an application written in VueJS 2.6.11 and BootStrap Vue 2.1.0

What I am trying to do is mimic the following functionality and can’t seem to wrap my head around it. I know how to do it in Javascript and jQuery from long ago, but I just don’t know how to do something like this in Vue.

What is happening is basically you have dependent dropdowns that are render dynamically. Basically (as shown below) when you select a Request Type from the first drop down, it looks to see if the Request Type has any children and if so renders the next dropdown with children as options. When you select next dropdown the process repeats until all entire hierarchy has been selected.

As you can see below selecting TESTING Request Type in the first dropdown causing a second dropdown to be generated with with options

When I select from the second dropdown, it sees that the selection has children and renders another dropdown.

The process is then repeated.

Once it sees that there are no more children from the previous selection, no more dropdowns are generated as the hierarchy is complete.

The below image just shows that what happens when you select a Request Type with no children as no dropdown are created.

I have no idea how to do something like this in VueJS. I’ve no issues doing dependent dropdowns by changing the options programmably by calling a method on the parent dropdown using change action (just a snippet of the code):

    <b-form-group
      label-cols="4"
      label-cols-lg="4"
      id="department-form-group"
      label="Department:"
      label-for="department"
    >
      <b-form-select
        v-model="form.department"
        :options="DepartmentOptions"
        @change="updateDepartmentPartTypesOptions"
        required
      ></b-form-select>
    </b-form-group>

    <b-form-group
      label-cols="4"
      label-cols-lg="4"
      id="partType-form-group"
      label="Part Type:"
      label-for="partType"
    >
      <b-form-select
        v-model="form.partType"
        :options="DepartmentPartTypesOptions"
        required
      ></b-form-select>
    </b-form-group>

methods: {
  updateDepartmentPartTypesOptions(){
    this.form.partType = "";
    this.DepartmentPartTypesOptions = window.DepartmentPartTypes[this.form.department];
    console.log("this.RequestTypeOptions: ", this.RequestTypeOptions);
  },
}

However this solution won’t work as I don’t know how many dropdown will need to be created to complete the hierarchy. It could be 1, it could be 5. I really don’t have a way to know until the first Request Type is selected and I check to see if it has children.

Ultimately I guess my question is, how do you go about in creating and destroying elements programmably and then appending it to DOM with VueJs.