Vue doesn't update component prop loaded by API call in production mode but does in development

Question

I have a wrapper component which provides the children with API calls and stores the result, and a list component which shows the requested items passed via prop. The problem is that it shows them in development mode but doesn't in production though API call is ok in both cases and the response is correct.

Both modes I ran in the same environment. Looks like a reactivity issue.

This is a template code:

<vue-api>
  <vue-list-filter-synchronizer slot-scope="{ result, getPrograms }"
                                ...
                                @params-updated="getPrograms">
     ...
     <div class="content">
        <vue-list :items="result ? result.data : []"
                  .../>
     </div>
  </vue-list-filter-synchronizer>
</vue-api>

VueAPI component:

const VueAPI = {
  data() {
    return {
      result: null,
      error: null,
      loading: false
    }
  },
  ...
  methods: {
    getPrograms(params) {
      this.query(services.getPrograms)([params]);
    },
    query(f) {
      return (args=[]) => {
        if (!this.loading) {
          this.loading = true;
          f(...args)
            .then(({ data }) => this.result = data)
            .catch(error => this.error = error)
            .finally(() => this.loading = false);
      }
    }
  },
  render() {
    return this.$scopedSlots.default(this.slotScope);
  }
}

I expect that result.data in VueAPI component will be shown as the list items in development and in production modes but it's so only in development mode.

Answer 1

First of all, my vue.debug.js had an old version so that it works with it and doesn't without. When I updated it the problem appears in debug mode too. Secondly, the problem is that I used a deprecated syntax for slot-scope. When I changed it to v-slot syntax everything starts to work as expected.