Обновить значение на Vuetify Slider

Я пытаюсь обновить значение при перемещении ползунка.

[codepen] https://codepen.io/JakeHenshall/pen/WLezNg

<div id = "app">
   <v-app id = "inspire">
<v-card flat color = "transparent">

  <v-subheader>Tick labels</v-subheader>

  <div v-if = "value == 0">
     {{ ticksLabels[0] }}
  </div>
  <div v-else-if = "value === 1">
    {{ ticksLabels[1] }}
  </div>
  <div v-else-if = "value === 2">
    {{ ticksLabels[2] }}
  </div>
        <div v-else-if = "value === 3">
    {{ ticksLabels[3] }}
  </div>
  <div v-else>
    {{ ticksLabels[4] }}
  </div>

  <v-card-text>
    <v-slider
      v-model = "fruits"
      :tick-labels = "ticksLabels"
      :max = "4"
      step = "1"
      ticks = "always"
      tick-size = "2"
    ></v-slider>
  </v-card-text>
</v-card>

Javascript:

new Vue({
    el: '#app',
    data () {
      return {
        value: 0,
        ticksLabels: [
          '0 - £5k',
          '£5k - £10k',
          '£10k - £25k',
          '£25k - £50k',
          '£50k+'
        ]
      }
    }
  })

Любая помощь с этим была бы замечательной, и некоторая информация о том, как привести в порядок оператор if, была бы замечательной.

Спасибо.