Vue.js Input type range props sync v.2.3.0+

App.vue

<template lang="pug">
div
  input-type-range(:min.sync="min" :max.sync="max" :step.sync="step" :value.sync="value")
  p {{value}}/{{max}}
</template>

<script>
export default {
  components: {
    InputTypeRange: () => import('~/components/InputTypeRange.vue')
  },

  data () {
    return {
      min: 0,
      max: 512,
      step: 1,
      value: 400
    }
  }
}
</script>

InputTypeRange.vue

<template lang="pug">
input(type="range" :min="min" :max="max" :step="step" :value="value"  @input="$emit('update:value', $event.target.value)")
</template>

<script>
export default {
  props: ['min', 'max', 'step', 'value']
}
</script>

<style lang="stylus" scoped>
$thumbWidth = 16px
$thumbHeight = 16px
$trackColor = lightness(black, 88%)
$thumbColor = lightness(black, 12%)
$trackHeight = 1px
$trackWidth = 100%

input[type=range]
  -webkit-appearance: none
  margin 0 0 1rem 0
  width $trackWidth
  &:focus
    outline 0
  &::-webkit-slider-runnable-track
    width $trackWidth
    height $trackHeight
    cursor pointer
    background-color $trackColor
    border 0
  &::-webkit-slider-thumb
    border 0
    width $thumbWidth
    height $thumbHeight
    border-radius 50%
    background $thumbColor
    cursor pointer
    -webkit-appearance none
    margin-top -($thumbWidth / 2)
  &::-moz-range-track
    width $trackWidth
    height $trackHeight
    cursor pointer
    background-color $trackColor
    border 0
  &::-moz-range-thumb
    width $thumbWidth
    height $thumbHeight
    border-radius 50%
    background-color $thumbColor
    cursor pointer
    border 0
  &::-moz-focus-outer
    border 0
</style>

For the child component to update value, we need to explicitly emit an event instead of mutating the prop