How to modify the code in VUE so that linked lists via v-model display the parameter immediately?

Question

JavaScript

Good afternoon.
Link to code
If the select does not use v-model, then the first option is selected by default and displayed in the list.
If you add a dependency using v-model, then the field becomes empty.
Well, as a result, I would like to display the information as in the screenshot.

Answer 1

created() {
  this.chooseChild = Object.values(this.parent)[0];
  this.chooseS = Object.values(this.chooseChild)[0];
  this.showinfo = Object.values(this.chooseS)[0];
},

UPD. In general, I would rewrite everything. I want to be able to build select chains of arbitrary length.
Instead of separate properties responsible for the current values ​​of selects, let's make an array:

data: () => ({
  selectedValues: [],
  ...

Let's make a computed property representing arrays of options for selects and a final value. We go deeper into the object with data, using the selected values ​​as keys:

computed: {
  selectData() {
    const options = [];
    let { items } = this;

    while (items instanceof Object) {
      options.push(Object.keys(items));
      items = items[this.selectedValues[options.length - 1]];
    }

    return {
      options,
      result: items || null,
    };
  },
},

Let's create selects and display the final value:

<div>
  <select
    v-for="(options, i) in selectData.options"
    v-model="selectedValues[i]"
    @input="selectedValues.length = i"
  >
    <option v-for="n in options">{{ n }}</option>
  </select>
</div>
<div>SELECTED: <b>{{ selectData.result || '&lt; NONE &gt;' }}</b></div>

In order to immediately set some final value, we will go deep into the data object as far as possible, always choosing the null key and placing it in the array of selected values:

created() {
  let { items } = this;
  while (items instanceof Object) {
    const key = Object.keys(items)[0];
    this.selectedValues.push(key);
    items = items[key];
  }
},

https://jsfiddle.net/64m37ng0/