如何在另一个数据属性中引用一个数据属性？

Question

我有一个如下所示的Vue实例：

new Vue({
  el: '#app',
  data: {
    colors: {
      green: '#73AF48',
      blue: '#1D6996',
    },
    circles: [
      { fill: '#73AF48', x:   0, y:   0 },
      { fill: '#1D6996', x:  50, y:   0 },
      { fill: '#1D6996', x: 100, y:   0 },
      { fill: '#1D6996', x:   0, y:  50 },
      { fill: '#73AF48', x:  50, y:  50 },
      { fill: '#1D6996', x: 100, y:  50 },
      { fill: '#1D6996', x:   0, y: 100 },
      { fill: '#1D6996', x:  50, y: 100 },
      { fill: '#73AF48', x: 100, y: 100 },
    ],
  },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>

<div id="app">
  <svg viewBox="0 0 150 150">
    <g transform="translate(25 25)">
      <circle v-for="circle in circles"
              :cx="circle.x"
              :cy="circle.y"
              :fill="circle.fill"
              r="25" />
    </g>
  </svg>
</div>

您可以看到我在fill数组中重复了相同的circles字符串。为了使代码保持DRY，我想为这些fill属性使用变量。

我可以想到两种方法：

1）将circles移至计算属性：

computed: {
  circles() {
    return [
      { fill: this.colors.green, x:   0, y:   0 },
      { fill: this.colors.blue,  x:  50, y:   0 },
      { fill: this.colors.blue,  x: 100, y:   0 },
      { fill: this.colors.blue,  x:   0, y:  50 },
      { fill: this.colors.green, x:  50, y:  50 },
      { fill: this.colors.blue,  x: 100, y:  50 },
      { fill: this.colors.blue,  x:   0, y: 100 },
      { fill: this.colors.blue,  x:  50, y: 100 },
      { fill: this.colors.green, x: 100, y: 100 },
    ];
  },
},

new Vue({
  el: '#app',
  data: {
    colors: {
      green: '#73AF48',
      blue: '#1D6996',
    },
  },
  computed: {
    circles() {
      return [
        { fill: this.colors.green, x:   0, y:   0 },
        { fill: this.colors.blue,  x:  50, y:   0 },
        { fill: this.colors.blue,  x: 100, y:   0 },
        { fill: this.colors.blue,  x:   0, y:  50 },
        { fill: this.colors.green, x:  50, y:  50 },
        { fill: this.colors.blue,  x: 100, y:  50 },
        { fill: this.colors.blue,  x:   0, y: 100 },
        { fill: this.colors.blue,  x:  50, y: 100 },
        { fill: this.colors.green, x: 100, y: 100 },
      ];
    },
  },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>

<div id="app">
  <svg viewBox="0 0 150 150">
    <g transform="translate(25 25)">
      <circle v-for="circle in circles"
              :cx="circle.x"
              :cy="circle.y"
              :fill="circle.fill"
              r="25" />
    </g>
  </svg>
</div>

或者2）使data为一个函数，将颜色设置为常数，然后return data对象的其余部分：

data() {
  const colors = {
    green: '#73AF48',
    blue: '#1D6996',
  };

  return {
    circles: [
      { fill: colors.green, x:   0, y:   0 },
      { fill: colors.blue,  x:  50, y:   0 },
      { fill: colors.blue,  x: 100, y:   0 },
      { fill: colors.blue,  x:   0, y:  50 },
      { fill: colors.green, x:  50, y:  50 },
      { fill: colors.blue,  x: 100, y:  50 },
      { fill: colors.blue,  x:   0, y: 100 },
      { fill: colors.blue,  x:  50, y: 100 },
      { fill: colors.green, x: 100, y: 100 },
    ],
  };
},

new Vue({
  el: '#app',
  data() {
    const colors = {
      green: '#73AF48',
      blue: '#1D6996',
    };
    
    return {
      circles: [
        { fill: colors.green, x:   0, y:   0 },
        { fill: colors.blue,  x:  50, y:   0 },
        { fill: colors.blue,  x: 100, y:   0 },
        { fill: colors.blue,  x:   0, y:  50 },
        { fill: colors.green, x:  50, y:  50 },
        { fill: colors.blue,  x: 100, y:  50 },
        { fill: colors.blue,  x:   0, y: 100 },
        { fill: colors.blue,  x:  50, y: 100 },
        { fill: colors.green, x: 100, y: 100 },
      ],
    };
  },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>

<div id="app">
  <svg viewBox="0 0 150 150">
    <g transform="translate(25 25)">
      <circle v-for="circle in circles"
              :cx="circle.x"
              :cy="circle.y"
              :fill="circle.fill"
              r="25" />
    </g>
  </svg>
</div>

这两种方法都行得通，但是它们对我来说都有些气味。在Vue中如何处理这种情况？