afh

<template>
  <div id="app">
    <svg>
      <circle
        class="c"
        v-for="i in 6"
        :key="i"
        :fill="c[i]"
        :cx="40*i+30"
        cy="40"
        r="20"
        @click="f(i)"
      ></circle>
    </svg>
  </div>
</template>

<script>
export default {
  name: "App",
  data: () => ({
    c: Array(7).fill("red")
  }),
  methods: {
    f(i) {
      this.$set(this.c, i, "blue");
    }
  }
};
</script>

<style>
circle {
  cursor: pointer;
}
</style>