Issue is in arrow function syntax, The arrow function doesn't define its own execution context. this value inside of an arrow function always equals this value from the outer function.

Vue will bind this keyword to the instance so that it will always reference the component instance. Because of this, it's really required to not use arrow functions when defining methods because they always bind this to the parent context, which is not actually the Vue instance - but the global object (the Window).

Working Demo with regular function syntax :

new Vue({
  el:'#app',
  methods: {
    autoFocusNextInput(event, max) {
      if (event.target.value.length === max) {
        const nextElement = this.$refs[`input-${Number(event.target.dataset.index) + 1}`];
        if (nextElement) nextElement.focus();
      }
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id='app'>
    <input
      type="text"
      name="1"
      maxlength="1"
      ref="input-0"
      data-index="0"
      @input="autoFocusNextInput($event, 1)"
      autocomplete="off"
    />
    <input
      type="text"
      name="2"
      maxlength="1"
      ref="input-1"
      data-index="1"
      @input="autoFocusNextInput($event, 1)"
      autocomplete="off"
    />
</div>

My Vue3 approach to eliminate .this keyword.

    const autoFocusNextInput = (event) => {
  if (event.target.value.length === 1) {
    const nextInput = event.target.nextElementSibling;
    if (nextInput) {
      nextInput.focus();
    } else {
      event.target.blur();
    }
  }
};


<Field
      class=""
      type="text"
      name="input1"
      maxlength="1"
      @input="autoFocusNextInput($event)"
      autocomplete="off"
      autofocus

    />
    <Field
      class=""
      type="text"
      name="input2"
      maxlength="1"
      @input="autoFocusNextInput($event)"
      autocomplete="off"
    />