vue-treeselect plugin. With Delayed Loading, Children are loaded but not displayed. What could be the problem?

Question

Vue.js

I'm using the vue-treeselect plugin to display a tree of regions from Google.
To load subregions (children) I use the Delayed Loading method.
According to the documentation, I did the following steps:
1. Set children: null for non-loadable data:

mounted() {
    this.regionsRoot[0].children.map((obj) => {
      obj.children = null;
      return obj;
    });
}

2. Added :load-options="loadOptions":

<div class="regions-container">
    <treeselect
        v-model="geoLocal"
        :load-options="loadOptions"
        :options="regionsRoot"
        :normalizer="normalizer"
        :multiple="true"
        :placeholder="place"
        :no-results-text="noResults"
        :is-default-expanded="true"
        :default-expand-level="1"
        :always-open="true"
        :search-nested="true"
        :max-height="360"
        :loading-text="loadingText"
    />
</div>

3. Created the loadOptions method with an axios request:

loadOptions({ action, parentNode, callback }) {
      console.log(parentNode);
      if (action === LOAD_CHILDREN_OPTIONS) {
        axios('/google_regions/?node=' + parentNode.key, {
          method: 'GET',
        })
          .then((data) => {
            console.log(data);
            parentNode.children = data.data;
            console.log(parentNode.children);
            callback();
        })
          .catch((error) => {
            callback(new Error('Failed to load options: network error.'));
          });
      }

At the same time, I use a normalizer, since the data comes with key and title, instead of id and label:

normalizer(node) {
        return {
          id: node.key,
          label: node.title,
        };
      },

The response from the server comes correct as an array of objects. The console displays the correct data.


Also correctly children is added to parentNode:


However, it is rendered incorrectly. Does not show children, but declares that there are none: "No sub-options".


Tried to use a key change to force a component to re-render. It turns out to display children, but with a component reload. This is inconvenient and incorrect.

I will be grateful for any help.

Answer 1

You have a jamb with reactivity somewhere. There is a suspicion that when assigning obj.children = null; obj doesn't have a children key - vue doesn't keep track of it. Use $set when mapping obj. Show what is in this.regionsRoot[0], or better yet, write an example in JSFiddle