SVG Pattern doesn't change fill color

Question

I am using Vue.js and I'm creating SVGs that use shape patterns as background. The patterns are working fine, but whenever I try to change the color of the pattern filling dynamically by passing props, it doesn't work. I am sure that the prop that I am passing is correct since I'm using it elsewhere.

<pattern
    id="TrianglePattern"
    patternUnits="userSpaceOnUse"
    x="0"
    y="0"
    width="1500"
    height="1500"
    viewBox="0 0 10 10">
  <path
      d="M 0 0 L 7 0 L 3.5 7 z"
      :fill="groupDetails.color ? groupDetails.color : '#ffffff'"
      stroke="blue" />
</pattern>

Answer 1

Works fine here:

new Vue({
    el: '#app',
    data: {
     groupDetails: {
         color: 'red'
        }
    }
});

label, input {
    cursor: pointer;
}

<script src="//unpkg.com/vue@2"></script>

<main id="app">
    <svg xmlns="http://www.w3.org/2000/svg" width="200" height="100">
        <pattern id="TrianglePattern"
                 patternUnits="userSpaceOnUse"
                 x="0" y="0" width="150" height="150"
                 viewBox="0 0 10 10">
            <path d="M 0 0 L 7 0 L 3.5 7 z"
                  :fill="groupDetails.color ? groupDetails.color : '#ffffff'"
                  stroke="blue" />
        </pattern>

        <path d="M100,10 a90,40 0 1,0 .1,0 z" fill="url(#TrianglePattern)" stroke="black" />
    </svg>

    <div>
        <label><input type="radio" v-model="groupDetails.color" value="red"/>   Red</label>
        <label><input type="radio" v-model="groupDetails.color" value="green"/> Green</label>
        <label><input type="radio" v-model="groupDetails.color" value="blue"/>  Blue</label>
        <label><input type="radio" v-model="groupDetails.color" value="yellow"/> Yellow</label>
    </div>
</main>