Force debounce to fire before component unmounts/destroyed

[TerryCaliendo-WealthCounsel]

Is there a way to force the debouncer to fire from the "beforeDestroy" on the component? I'm having issues where if the user changes a field and then quickly clicks on something that causes the UI to change (and therefore the component to get destroyed) before the debounce duration completes, the final debounce doesn't fire.

[dhershman1]

There isn't a way to fire it off right away directly, since usually you want to run this with a input of some kind so usually if you leave that input for another page, the call should cancel out instead of finishing (could cause weirdness in navigation).

I might need a clearer picture of what's happening in this instance.

[TerryCaliendo-WealthCounsel]

Hopefully this pseudo code helps illustrate. Its a bit different from my actual situation but should have the same structure. I realize I could drastically reduce the debounce but I made it large to exacerbate the situation:

If the user types to change the "FirstName" field then quickly clicks to load the "Dashboard" component before the 3s debouncer fires, the "UserInformation" component and its children are destroyed before the final debounce fires and saves the user's change. I need to force the emit to happen before the component tree is destroyed or the API call doesn't happen because the UserInformation is destroyed and doesn't catch the "emit".

UserInterface.vue
==================
<UserInterface> (Chooses one component below; like a router)
      <Dashboard>
      <UserInformation>
           Template
                 <TextInputComponent fieldValue="Terry" fieldLabel="FirstName"  @updateApi="makeApiCall">
                 <TextInputComponent fieldValue="Caliendo" fieldLabel="LastName" @updateApi="makeApiCall">                 
           Methods
                makeApiCall(){
                    // save the updated value to the database
                } 


TextInputComponent.vue // reuseable text field component
====================

<Text Input Component> 
          Template
                <input v-debounce:3s="emitChange">

          Methods
               emitChange(newValue){
                   this.$emit('updateApi', newValue)
               }

[TerryCaliendo-WealthCounsel]

I think there needs to be a way to force the function to fire in the "unbind" directive Function Hook.

From what I've seen in forum posts, people are saying to use DOM data attributes if you want to communicate between Hook Functions; but we don't need to share a variable value, we need to share a function. Which maybe can be done by attaching the function to the DOM element, per this post?

Other things I'm seeing is that if you want access to lifecycle events, you need a component. So I'm trying to fathom how to create a debouncer component. I've got an idea for something with scoped-slots, but its ugly and I'm hoping you can come up with solution using the directive you've created!

[TerryCaliendo-WealthCounsel]

@dhershman1 - Any further thoughts on this?

[dhershman1]

In this type of situation @TerryCaliendo-WealthCounsel would it be a better idea to check if your value is populated and call the function directly you need to call in the unmount hook?

If not my approach to this might be adding an option, and if possible I'd like to see if I can listen for the hook itself in the plugin.