Vue slider component METHODS

HTML

<div id="app">
  <vue-slider
    ref="slider"
    v-model="value"
    v-bind="options"
  ></vue-slider>
  <h1>{{ value }}</h1>
  
  <div class="btn-group">
    <button @click="$refs.slider.setValue(50)">setValue</button>
    <button @click="logValue($refs.slider.getValue())">getValue</button>
    <button @click="$refs.slider.setIndex(50)">setIndex</button>
    <button @click="logIndex($refs.slider.getIndex())">getIndex</button>
  </div>
</div>
<script src="https://nightcatsama.github.io/vue-slider-component/dist/index.js"></script>

CSS

#app {
  margin: 50px;
}

h1 { 
  text-align: center;
}

Vue

new Vue( {
  el: '#app',
  data () {
    return {
    	value: [0, 50],
      options: {
        eventType: 'auto',
        width: 'auto',
        height: 10,
        dotSize: 16,
        min: 0,
        max: 100,
        interval: 1,
        show: true,
        speed: 1,
        tooltipDir: 'top'
      }
    }
  },
  methods: {
  	logValue (v) {
    	window.alert("Value: "+ v)
    },
  	logIndex (v) {
    	window.alert("Index: "+ v)
    }
  },
  components: {
    'vueSlider': window[ 'vue-slider-component' ],
  }
})