[Vuejs]-Vuejs 2 with SVG

I guess this should do the trick for you:

<div id="drawing">
    <input v-model="a" type="range" /> A: {{a}} <br>
    <input v-model="b" type="range" /> B: {{b}}<br>
    <input v-model="c" type="range" /> C: {{c}}<br>
    <input type="text" v-model="color" id="inputColor"/>
    <svg class="svg-triangle" width='100' height='100'>
    <path :d="result" v-bind:class="color"/>
  </svg>
    <p>
        <ul>
            <li>red</li>
            <li>blue</li>
            <li>green</li>
        </ul>
    </p>
    <button v-on:click="update">update</button>
  </div>

Your javascript code can be simplified to:

new Vue({
  el: '#drawing',
  data: {
    color:"red",
    a: 50,
    b: 95,
    c: 5,
    result: ''
  },
  methods:{
    update: function(){
        this.result = `M ${a}, 6 ${b}, 97.5 ${c}, 97.5 z`
    }
  }   
})

Check the fiddle: https://jsbin.com/mevehipoce/edit?html,js,output