<div id="app">
  <div class="row">
    <label for="list">list-style-type:</label>
    <select id="list" v-model="selectedOption" @input="changeOption">
      <option v-for="(item, index) in items" :value="item" >{{ item }}</option>
    </select>
  </div>
  <div class="box">
    <div class="item" v-for="(item, index) in items" style="list-style-type:var(--list-item-style)">item-{{index}}</div>
  </div>
</div>
:root {
  --list-item-style: none;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100vw;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2vw;
}

#app {
  border: 1px solid #eee;
  border-radius: 5px;
  box-shadow: 0 0 2px rgba(0,0,0,.25);
}

.row {
  padding: 10px 20px;
  border-bottom: 1px solid #eee;
  background: #04abe3;
  color: #fff;
  border-radius: 5px 5px 0 0;
}
.box {
}
.item {
  display: list-item;
  list-style-position: inside;
  padding: 10px 15px;
  
  &:nth-child(odd) {
    background-color: #efefef;
  }
}
new Vue({
  el: '#app',
  data: {
    selectedOption: 'none',
    items: [
      'disc',
      'circle',
      'square',
      'decimal',
      'decimal-leading-zero',
      'lower-roman',
      'upper-roman',
      'lower-greek',
      'lower-latin',
      'upper-latin',
      'armenian',
      'georgian',
      'lower-alpha',
      'upper-alpha',
      'none',
      'inherit'
    ]
  },
  methods: {
    changeOption: function(e) {
      document.documentElement.style.setProperty('--list-item-style', e.target.value);
      console.log(e.target.value)
      
    }
  },
})
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js