Cleave directive on Vue locks the input value for external changes, when using delimiters.

[lgahdl]

jsfiddle to reproduce the problem: https://jsfiddle.net/lgahdl/rkdtmya4/7/

Behavior: The input value is locked for external changes, the value is resetted for it's state before the external change.

Expected Behavior: On value changing, the cleave masks let the input value changes and masks it.

[jakedolan]

While implementing the directive for my codebase today, it appears that the assignment to el.value is what is causing the issue that you are seeing.

update: (el) => {
    const event = new Event("input", { bubbles: true });
    setTimeout(function () {
      // el.value = el.cleave.properties.result;
      el.dispatchEvent(event);
    }, 100);
  }

See: https://codesandbox.io/s/cleavejs-vue-directive-2gd82

Going a step further, I am unsure you need the update hook at all unless you want to do further operations on the event. Particularly if you are also using v-model already. You can see it work as expected after removal in both the jsfiddle you provided and the codesandbox.