title: Vue - Update rendered elements from a v-for with :style that uses their values
body: <p>Is it possible to use object props in a <em>v-for</em> to dynamically update the <em>:style</em> directive? I have an array of values that I want to use in this computed property:</p>
  <p>Script</p>
  <pre><code>get dotStyle() {
          if (this.clickedCoordinates === null) return { display: 'none' }
  
          for (var item of this.entity.damages) {
              this.x.push(item.blueprintPositionX);
              this.y.push(item.blueprintPositionY);
          }
  
          console.log(this.x, &quot;x&quot;);
          console.log(this.y, &quot;y&quot;);
  
          return {
              top: `${this.y[0]}px`,
              left: `${this.x[0]}px`,
          }
      }
  </code></pre>
  <p>Template</p>
  <pre><code>&lt;div class=&quot;image-mark&quot; :style=&quot;dotStyle&quot;  /&gt;
  </code></pre>
  <p>This currently updates the position of the element for the first item in the array, but is there a way which I can loop through the array and use a <em>v-for</em> to render each array with the x, y values?</p>
  <p>Apologies if my question is unclear and any help would be very much appreciated!</p>
  <p>Thanks</p>