Как мне преобразовать мое VUE в компоненте. Vue

Question

У меня есть скрипка, которая изменяет контраст и яркость изображения.

Когда я пытаюсь добавить его в качестве компонента .vue на мой сайт, ползунок больше не влияет на изображение.Я знаю, что проблема связана с моей функцией фильтра.Я просто не могу понять, почему мой атрибут: style не применяет изменение ко мне.

Что я делаю неправильно / не получаю?

скрипта, которая работает - https://jsfiddle.net/BBMAN/fxtrtqpj/14/

код для моего компонента .vue, который не работает.

<template>
  <div class="brightness-slider container">
    <h1>{{ msg }}</h1>
    <h2>Built using Vue.js</h2>
     <div class="row">
        <div class="col-md-10">
          <img ref="img" class="img img-responsive" :style="filters" />
        </div>
        <div class="col-md-2">
          <strong>Contrast ({{contrast}})</strong>
          <input class="slider vertical" type="range" orient="vertical" v-model="contrast" max="1" min="0" step="0.01" />
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
          <h4>
            <strong>Brightness ({{brightness}})</strong>
          </h4>
          <input class="slider horizontal" type="range" v-model="brightness" max="3" min="0" step="0.01" />
        </div>
      </div>
    </div>
</template>

<script>
  export default {
    name: 'ImageBrightnessSlider',
    data() {
      return {
        //sending data to view.
        msg: 'Audience Republic Brightness Modifier',
        brightness: 1,
        contrast: 1
      }
    },computed: {
    filters() {
      const toDash = (str) => str.replace( /([a-z])([A-Z])/g, '$1-$2' ).toLowerCase()
      debugger;
      return { filter: Object.entries(this._data).filter(item => typeof(item[1]) !== 'object').map(item => `${toDash(item[0])}(${item[1]})`).join(' ') }
    }
  },
    mounted() {
      this.$refs.img.src = require('../assets/pleasure-garden-1200-by-768.jpg')           
    }    
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  h1,
  h2 {
    font-weight: normal;    
  }

  ul {
    list-style-type: none;
    padding: 0;
  }

  li {
    display: inline-block;
    margin: 0 10px;
  }

  a {
    color: #42b983;
  }
  input[type=range][orient=vertical]{
      writing-mode: bt-lr; /* IE */
      -webkit-appearance: slider-vertical; /* WebKit */
      width: 8px;
      height: 100%;
      padding: 0 5px;
  }
  .slider {
    -webkit-appearance: none;
    width: 100%;
    height: 3px;
    border-radius: 5px;   
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}
.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    border-radius: 50%; 
    background: #4CAF50;
    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #4CAF50;
    cursor: pointer;
}
</style>

Answer 1

"скрипка работает" = неверно

вы пытаетесь вставить HTML CSS JavaScript в Javascript !!!интерпретатор Javascript не понимает HTML CSS!

Ваш код должен быть примерно таким: this

index.html

<div id="App">
<!-- HTML code -->
</div>

<script>
// js code
</script>

<style scoped>
/* css code */
</style>

у вас много ошибок, см. официальную документацию

также вы можете посмотреть мои примеры

ОБНОВЛЕНО: пример SFC