Esta é uma "aula" onde faremos um ajuste no nosso Component Range.

O aluno Fábio notou um detalhe muito importante, da forma que implementamos o nosso campo personalizado na aula, a "label" dele não "reage" ao reset do formulário.

O motivo é bem simples: nós criamos um estado local dentro da instância do component:

data() {
    return {
        valorAtual: this.valor || this.$attrs.min
    }
},

E baseamos nossa Computed Property nesse estado:

computed: {
    customLabel() {
        return `${this.label} (R$ ${this.valorAtual})` // aqui
    }
},

A consequência disso é que ao resetar o formulário, somente a prop "valor" é atualizada, a prop "label" não, e portanto a Computed Property não precisa ser recalculada.

Para ajustar isso é muito simples:

1. Vamos remover o estado local do Component

2. E vamos passar a basear nossa Computed Property na prop "value"

O Component fica assim:

<template>
  <div>
    <label>{‌{ customLabel }}</label>
    <input
      type="range"
      v-bind="$attrs"
      :value="valor"
      :class="inputClasses"
      @change="atualizar"
    >
  </div>
</template>

<script>
export default {
  inheritAttrs: false,
  model: {
    prop: 'valor',
    event: 'change'
  },
  props: {
    label: String,
    valor: [Number, String],
    inputClasses: [String, Object, Array]
  },
  computed: {
    customLabel () {
      return `${this.label} (R$ ${this.valor || this.$attrs.min})`
    }
  },
  methods: {
    atualizar (event) {
      const valor = event.target.value
      this.$emit('change', valor)
    }
  }
}
</script>

Façam os testes, qualquer dúvida postem no fórum do curso.

Grande abraço,
Plínio Naves