Vue.js--change div element's size, el.style.attr not working

Question

I was trying to make sth like in the image in Vue, but having troubles changing the div elements size.

Circles group:

Vue warn:

Error in mounted hook: "TypeError: Cannot read property 'style' of undefined

Also tried el.setAttribute("style", "top: px; bottom: px;..."), having errors with the setAttribute() mehtod.

<template>
  <div class="wavyCircles">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
  </div>
</template>

computed: {
    circleSizing() {
      let circles = document.getElementsByClassName("circle")
      for (let i = 0; i <= circles.length; i++) {
        circles[i].style.top = 10 * (i + 1)
        circles[i].style.bottom = 10 * (i + 1)
        circles[i].style.left = 10 * (i + 1)
        circles[i].style.left = 10 * (i + 1)
      }
    }
  },

  mounted: function() {
    this.circleSizing();
  }

Answer 1

You should be using a method not a computed property and also you were looping an extra loop which in result you get circles[i] is undefined

Vue.config.devtools = false
Vue.config.productionTip = false

new Vue({
  el: "#app",
  methods: {
    circleSizing() {
      let circles = document.getElementsByClassName("circle")
      for (let i = 0; i <= circles.length - 1 ; i++) {
        circles[i].style.top = 10 * (i + 1) + "px"
        circles[i].style.bottom = 10 * (i + 1) + "px"
        circles[i].style.left = 10 * (i + 1) + "px"
        circles[i].style.left = 10 * (i + 1) + "px"
      }
    }
  },
  mounted() {
      this.circleSizing()
  }
})

.wavyCircles {
  position: relative;
}

.circle {
  position: absolute
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div class="wavyCircles">
    <div class="circle">u</div>
    <div class="circle">s</div>
    <div class="circle">e</div>
    <div class="circle">m</div>
    <div class="circle">e</div>
    <div class="circle">t</div>
    <div class="circle">h</div>
    <div class="circle">o</div>
    <div class="circle">d</div>
    <div class="circle">i</div>
    <div class="circle">n</div>
    <div class="circle">s</div>
    <div class="circle">t</div>
    <div class="circle">e</div>
    <div class="circle">a</div>
    <div class="circle">d</div>
  </div>
</div>