How to force Vue.js to sync data?

Question

Vue.js

I write the front on Vue.js.

There is an input that is associated with a certain variable inside. By itself, everything works well.
The input has an autocomplete drop-down menu implemented by a third-party library.
And there is a problem: if I select a tooltip from the menu, the text is inserted into the input, but Vue does not notice this change! And for him to notice the new data, you need to type something else inside the input (at least a space, for example).

Okay, I think. The autocomplete library generates its own events, you need to listen to them and do something after inserting. The plan is logical, but "doing something" - what exactly is it?

If you artificially call an edit event in the input, for example like this:
$('input[type=text]').trigger('input');
then Vue notices the new data. But a new problem arises - autocomplete notices this event too and expands again. Of course, I tried all sorts of preventDefault and stopPropagation - they do not help. A vicious circle - either the tops do not want, or the bottoms cannot.

I tried to climb inside the object through black paths and manually call its methods, events ... everything is useless, because they seem to work, but there is no sense - the data in the variables is still old. Vue didn't sync anything.

How to manually force him to rub his eyes and look into the input to understand that new data has appeared there?
Googled, found questions from people with similar problems, but did not find a solution.

Minimalist demo: codepen.io/dom1n1k/pen/WoLYvM

update
It turned out to solve the problem by double inserting data - first, the library puts the text into the input, and then I (by event) also send the same thing to the model. A crutch, of course, but it seems to work.

Answer 1

In your case, the easiest way to do this is
Just subscribe to an event that fires on the element when selected from the dropdown list

Answer 2

1) You can make a directive and hang on this input that will track DOM changes and update the model (MutationObserver) - does not work in older browsers.
2) The directive that tracks the left signal (eg "update"), and send it from the library
But the most correct one is the directive that binds this lib and uses the api lib to update the model.