Vuetify V2: v-col as section for divider with gradient that extends outside of its bounds?

So the wavy gradient + clip-path sections have been in vogue for a bit e.g. or

I was curious of how to emulate this in a nuxt + vuetify (v2) application. From the Vuetify v2, the grid documentation:

• v-container: provides the ability to center and horizontally pad your site's contents
• v-row: (replaces v-layout) control the layout and flow of its inner columns
• v-col: (replaces v-flex) is a content holder that must be a direct child of v-row

and the with a default nuxt app setup with vuetify:

<v-app>
  <v-content>
    <v-container>
      <nuxt />
    </v-container>
  </v-content>
</v-app>

and I am using <v-row> as sections in the following manner (e.g. index.vue)

<v-row> <!-- <nuxt/> -->
  <v-col cols="12> <!-- section 1 -->
    ...
  </v-col>
  <v-col cols="12> <!-- section 1 -->
    ..
  </v-col>
</v-row>

My question is how I can have thes v-cols ("sections") that are nested inside v-container/nuxt/v-row have a gradient and clip-path curve that extends the width of the app rather than the width of the column with the padding, margins, etc