Getting strange errors in latest version about devtools HOT 5 CLOSED

<template>
  <div class="input" :class="{ 'is-active': active || hasValue, 'is-valid': hasValue && isValid, 'is-invalid': hasValue && !isValid }">
    <label for="{{ id }}" class="input__label" @click="activate">{{ label }}</label>
    <input id="{{ id }}" type="{{ type }}" class="input__input" required="{{ required }}" v-model="value" @focus="activate" @blur="deactivate"></input>
    <div class="input__error" v-if="hasValue && !isValid" transition="input-error">{{ error }}</div>
    <a href="#" class="input__helper" v-if="helper">This is a helper</a>
  </div>
</template>

<script>
import { validate } from '../helpers'

export default {

  props: {
    id: {
      type: String,
      required: true
    },
    label: {
      type: String,
      required: true,
      default: 'Label'
    },
    type: {
      type: String,
      default: 'text'
    },
    required: {
      type: Boolean,
      default: false
    },
    validation: {
      type: String,
      default: 'text'
    },
    error: {
      type: String,
      default: 'Please fill out this field correctly.'
    }
  },

  methods: {

    activate() {
      this.active = true
    },

    deactivate() {
      this.active = false
    }

  },

  computed: {

    hasValue() {
      return this.value.length
    },

    isValid() {
      let type = this.validation
      let value = this.value

      return validate(type, value)
    }

  },

  data() {
    return {
      active: false,
      value: '',
      helper: false
    }
  }

}
</script>