Debounce done right in Vue.js

app.js

import debounce from 'lodash/debounce';

export default {
  data() {
    return {
      loading: false,
      query: null,
    };
  },
  watch: {
    query() {
      this.debouncedFetch();
    },
  },
  created() {
    this.debouncedFetch = debounce(this.fetch, 500);
  },
  mounted() {
    this.fetch();
  },
  methods: {
    async fetch() {
      try {
        this.loading = true;
        const { data } = await window.axios.post(this.fetchUrl, { query: this.query });
      } catch (e) {
        console.error(e);
      }

      this.loading = false;
    },
  },
};