SOURCE

new Vue({
  el: '.container1',
  mounted () {
    window.onresize = () => {
  		this.$el.style.height = getComputedStyle(this.$el).width
    }
  }
})
new Vue({
  el: '.container2',
  mounted () {
    window.onresize = () => {
  		this.$el.style.height = getComputedStyle(this.$el).width
    }
  }
})
new Vue({
  el: '.container3',
  mounted () {
    window.onresize = () => {
  		this.$el.style.height = getComputedStyle(this.$el).width
    }
  }
})

<script src="https://unpkg.com/vue"></script>

<div class="container1">
  <div class="area" v-for="i in 9">
    <div class="dot"></div>
  </div>
</div>

<div class="container2">
  <div class="area" v-for="i in 9">
    <div class="dot"></div>
  </div>
</div>

  <div class="container3">
    <span v-for="i in 9"></span>
  </div>

.container1,.container2,.container3 {
  background-color: #fff;
  border: 1px solid #000;
  margin: 0 80px;
}
.container1{
  display: flex;
  flex-wrap: wrap;
}
.area {
    width: 33.33%;
    padding-bottom: 33.33%;
    position: relative;
    height: 0;
}
.container2{
  overflow: hidden;
}

.container2::after{
  content: '';
  clear: both;
}
.container2 > .area{
  float: left;
}
.dot {
    width: 70%;
    padding-bottom: 70%;
    background-color: #000;
    border-radius: 50%;
    margin: auto;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

span {
    display: inline-block;
    width: 23.3%;
    padding-bottom: 23.3%;
    margin: 5%;
    background-color: #000;
    border-radius: 50%;
}