vue.js keyup, keydown events one character behind

Because you are depending on the input's v-model to update the keywords property, the value won't update until the Vue component has re-rendered.

You can access the updated value of keywords in a callback passed to this.$nextTick like in this example:

new Vue({
  el: '#app',
  data() {
    return { keywords: '' }
  },
  methods: {
    queryForKeywords: function(event) {
      this.$nextTick(() => {
        if (this.keywords.length > 2) {
         console.log("keywords value: " + this.keywords);
        }
      });
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<div id="app">
  <input type="text" class="form__field" v-model="keywords" v-on:keyup.enter="queryForKeywords" v-on:keydown="queryForKeywords">
</div>

The real problem doesn't has to do with vue.js at all

The problem hides behind the keydown event!

So when the event fires, the input value is NOT updated yet. Fiddle example

MDN - keydown event

In general, keydown it is used for informing you which key is pressed. And you can access it like this:

document.addEventListener('keydown', logKey);

function logKey(e) {
  console.log(e.key)
}

As solution, you can use the keyup event: Fiddle

My recommendation is to use a custom v-model using :value and the @input event.

<input type="text" :value="keywords" @input="queryForKeywords">

And the script:

  data: {
    keywords: ''
  },

  methods: {
     queryForKeywords(event) {
       const value = event.target.value
         this.keywords = value
       if (value.length > 2) {
            console.log("keywords value: " + this.keywords);
       }
    }
  }

See it in action

The currently accepted answer is for an old version of vue, in the latest versions should be used @input instead of keypress or keyup.