How to fix this method in Vuejs which is working fine with async but causes problem when you replace it with other method?

Question

I have a nodal which is a child component. In the parent opening looks like this:

 editProduct(product) {
      this.$buefy.modal.open({
        parent: this,
        component: prodEditor,
        props: {
          product,
        },
        onCancel: async () => {
          const { data } = await api.products.getDetails({
            ...
          })
          this.productDetails = data
        },
      })
    },

Above method works perfect however the thing is that async logic I have as a separate method and when I try to ignore duplicating and place that method for onCancel it doesn't work. Here is how it looks like in that scenario:

 editProduct(product) {
      this.$buefy.modal.open({
        parent: this,
        component: prodEditor,
        props: {
          product,
        },
        onCancel: async () => {
        this.getProductDetails
        },
      })
    },

Above one is not working and is not showing any console errors while this.getProductDetails is just container of above async api call. What is wrong and how can I fix this?