Cache causing issues when changing options dynamically.

[43Laboratories]

The issue is when I load the initial options and make a query in this case i query no1. I then update the options, and no1 still appears i the options until i use a non-cached query. I think the issue is caching or there might be errors in the code.

I am simply trying to clear the options when this event is emitted. eventBus.$on('remove_all_options', this.changeOptions);

TreeSelect Component HTML

<div id="app" class="outerSelect">
  <div id="TS_1" class="TS_1" > 
  <treeselect v-model="value" :multiple="true" :options="optionsData" placeholder="Markets"
  :async="true"
  :load-options="loadOptions"
  ref="treeselect"
  > 



TreeselectJS
const simulateAsyncOperation = fn => {
  setTimeout(fn, 750)
}

 new Vue({
el: '#app',
data: {
  value: null,
  optionsData: [
  ], 
  },
created() {
  eventBus.$on('remove_all_options', this.changeOptions);
     },

Methods:

    methods: {
        
        triggerLoadOptions(){
            console.log("should be making a callback")
            this.$refs.treeselect.loadOptions({ callback: () => {} });
        },

method2 loads the initial options

  loadOptions(params) {
      
      console.log("load options called")
      console.log("called = ", window.glob_called)

    if (window.glob_called === true) {
      
      this.optionsData = []
    
      this.value = null;

 
      if (params && typeof params.callback === 'function') {
          console.log("Performing callback for update")
        params.callback(null, this.optionsData);
      }
    } else if (window.glob_called === false) {
    
      simulateAsyncOperation(() => {
        const initialOptions = [
          {
            id: 'No1',
            label: 'No1',
            children: [
              { id: 'suboption1', label: 'No1 Suboption 1' },
              { id: 'suboption2', label: 'No1 Suboption 2' },
            ],
          },
        ];

        this.optionsData = initialOptions
        if (params && typeof params.callback === 'function') {
          console.log("performing callback for load")
          params.callback(null, this.optionsData);
        }
      });
    }
  },

method3 changes the options

        changeOptions() {
     
      window.glob_called = true
      this.optionsData = [];
    this.v_search_query = null;
    this.$refs.treeselect.loadOptions({ callback: () => {} }); 
  },
},

});

[43Laboratories]

Treeselect has no support for this feature. Better of creating your own asynchronous loading system as I did.