Vue js column wrapping not adding new row

Question

I'm trying to make a grid system with my Vue JS project by using the column wrapping method, but it's not working or I'm doing something wrong..

I have a parent(container) and 2 childs(divs) next to each other.

1 is for filtering the listing and the other one is the listing it self.

<template>
<div class="body">
  <div class="menu">
    <div class="buttons">
      <a id="house" href="house.html">Houses</a>
      <a href="#news">Home</a>
      <a href="#contact">About Us</a>
      <a href="#contact">Contact</a>
    </div>
  </div>
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify-labs.css" />



  <div class="container">
    <div class="space">

    </div>


    <div class="filter">
      <h3>Filters</h3>

      <div class="filter-input">
        <label for="">City</label>
        <input type="text" name="" value="">

        <br><br>
        <label for="">Persons</label>
        <select id="opt">
          <option class="1" value="1">1</option>
          <option class="2" value="2">2</option>
          <option class="1" value="3">3</option>
          <option class="2" value="4">4+</option>
        </select>
        <br><br>

        <label for="">Date</label>
        <input type="date" id="start" name="trip-start" value="2018-07-22" min="2023-01-01" max="2030-01-01" />
-

        <input type="date" id="end" name="trip-start" value="2018-07-22" min="2023-01-01" max="2030-01-01" />
      </div>
    </div>




  <div class="listings">
    <v-container class="bg-surface-variant">

      <v-row no-gutters>
        <v-col>
          <v-sheet class="pa-2 ma-2">
            .v-col-auto
          </v-sheet>
        </v-col>
        <v-col>
          <v-sheet class="pa-2 ma-2">
            .v-col-auto
          </v-sheet>
        </v-col>
        <v-col>
          <v-sheet class="pa-2 ma-2">
            .v-col-auto
          </v-sheet>
        </v-col>
<v-responsive width="100%"></v-responsive>
        <v-col>
          <v-sheet class="pa-2 ma-2">
            .v-col-auto
          </v-sheet>
        </v-col>
        <v-col>
          <v-sheet class="pa-2 ma-2">
            .v-col-auto
          </v-sheet>
        </v-col>
        <v-col>
          <v-sheet class="pa-2 ma-2">
            .v-col-auto
          </v-sheet>
        </v-col>
      </v-row>
    </v-container>

  </div>


  </div>
</div>
</template>

I've tried the flex system, but that one was looking shabby.