Why can't input be cleared after socket.io event?

Question

JavaScript

send: function (e) {
                e.preventDefault();
                let chatMsg = $('#chat_message');
                socket.emit('new_message', {message: chatMsg.val()}); // без этой строчки очистит инпут
               chatMsg .val('');
            },

There are no errors in the console.

Submission form:

<form action="" @submit="send" v-if="authCheck()">
                <input id="chat_message" autocomplete="off"/>
                <button type="submit">Send</button>
            </form>

Why is that?

Checked with debugger; this function returns the value in the input:

/**
 * Defer a task to execute it asynchronously.
 */
var nextTick = (function () {
  var callbacks = [];
  var pending = false;
  var timerFunc;

  function nextTickHandler () {
    pending = false;
    var copies = callbacks.slice(0);
    callbacks.length = 0;
// тут вернет значение обратно в инпут
    for (var i = 0; i < copies.length; i++) {
      copies[i]();
    }
  }

  // the nextTick behavior leverages the microtask queue, which can be accessed
  // via either native Promise.then or MutationObserver.
  // MutationObserver has wider support, however it is seriously bugged in
  // UIWebView in iOS >= 9.3.3 when triggered in touch event handlers. It
  // completely stops working after triggering a few times... so, if native
  // Promise is available, we will use it:
  /* istanbul ignore if */

There are thousands of lines of code in app.js, all packages, it is not clear what causes this behavior. Either socket.io or vue.js due to the use of socket.io in it

UPD, I found the solution, as usual, but hacky. I would be grateful if someone could explain why this is so:

clearChatMsg: function(){
                $('#chat_message').val('');
            },

Using a third-party method solved the problem, and yet, it is not entirely correct.

Answer 1

chatMsg .val('');

chatMsg.val('');(without space)