Não estou conseguindo identificar este erro: [Vue warn]: Error in render: “TypeError: Cannot read property '$error' of undefined”

Front-end
#1 
 <template>
  <div class="col-md-12">
    <form class="form-horizontal" role="form">
      <div class="tab-content">
        <div class="form-group" v-bind:class="{ 'has-error': $v.remedio.nomer.$error }">
          <label for="nomer" class="col-md-2 control-label ui-outputlabel ui-widget text-left">Nome: *</label>
          <div class="col-md-9">
            <input type="text" class="form-control" id="nomer" v-model="remedio.nomer" autocomplete="off" @input="$v.remedio.nomer.$touch()" maxlength="50">
            <span class="help-block" v-show="$v.remedio.nomer.$error">Campo é obrigatório</span>
          </div>
        </div>
        <div class="form-group">
          <label for="descricao" class="col-md-2 control-label ui-outputlabel ui-widget text-left">Descrição: </label>
          <div class="col-md-9">
            <textarea
              type="text"
              class="form-control"
              id="descricao"
              autocomplete="off"
              v-model="remedio.descricao"
            ></textarea>
          </div>
        </div>
        <div class="form-group" v-bind:class="{ 'has-error': $v.remedio.dataDeValidade.$error }">
          <label for="dataDeValidade" class="col-md-2 control-label ui-outputlabel ui-widget text-left">Data de Validade: *</label>
          <div class="col-md-9">
              <input
                type="text"
                class="form-control"
                id="dataDeValidade"
                autocomplete="off"
                v-model="remedio.dataDeValidade" />
              <span class="help-block" v-show="$v.remedio.dataDeValidade.$error">Campo é obrigatório</span>
          </div>
        </div>
        <div class="form-group" v-bind:class="{ 'has-error': $v.remedio.quantidade.$error }">
          <label for="quantidade" class="col-md-2 control-label ui-outputlabel ui-widget text-left">Quantidade: *</label>
          <div class="col-md-9">
              <input
                type="text"
                class="form-control"
                id="quantidade"
                autocomplete="off"
                v-model="remedio.quantidade" />
              <span class="help-block" v-show="$v.remedio.quantidade.$error">Campo é obrigatório</span>
          </div>
        </div>
        <div class="form-group" v-bind:class="{ 'has-error': $v.remedio.principioAtivo.$error }">

Consegui identificar que o erro está dentro da div que contém o :

 $v.remedio.quantidade.$error

Porém não sei por que está dando errado. Esse input era para conter todos os principios que estão em outra tabela, acredito que pode ser algum erro no minha lógica dentro do export default {}

#2 
<script>
import { required} from 'vuelidate/lib/validators'
import { HTTP } from '@/components/http-common'
import Notificacao from '@/components/ui/Notificacao'
import RouterUtils from '@/components/util/RouterUtils'
import { validationMixin } from 'vuelidate'
import Multiselect from 'vue-multiselect'

const REMEDIO_DEFAULT = {
    nomer: '',
    descricao: '',
    dataDeValidade: '',
    quantidade: '',
    principioAtivo: null
}

export default {
  data(){
    return{
      principios: [],
      remedio: REMEDIO_DEFAULT
    }
  },
  components: {
   Multiselect
  },
  mixins: [validationMixin],
  validations: {
    remedio: {
      nomer: {
        required
      },
      dataDeValidade: {
        required
      },
      quantidade: {
        required
      },
      principios: {
        required
      }
    }
  },
  mounted(){
    let id = this.$route.params.id
    if(id) {
      HTTP.get(`remedio/${id}`).then(response => {
        this.remedio = response.data
      }).catch(error => {
        this.voltar()
      })
    }
    else{
      this.novo()
    }
  },
  methods: {
    voltar() {
      RouterUtils.push(this, { path: '/farmacia/remedio', query: { restore: 'true' }})
    },
    novo(){
      this.remedio = {...REMEDIO_DEFAULT}
      this.$v.$reset()
    },
    salvar(novo){
      if (this.$v.remedio.$invalid) {
          Notificacao.showError('Verifique os campos do formulário')
          return
        }
      HTTP.post('remedio', this.remedio).then(response => {
        Notificacao.showInfo('Registro gravado')
        if (novo){
          this.novo()
          RouterUtils.replace(this, `/farmacia/remedio/form/`)
        } else {
          this.remedio = response.data
          RouterUtils.replace(this, `/farmacia/remedio/form/${this.remedio.id}`)
        }

      }, error => {
          if(error.response.status == 404){
            this.voltar()
          }
      })
    }
  }
}
</script>

<style>

</style>

Este é a outra parte do meu código