Override Vuetify Class Dynamically

I have a Vuetify dialog that I want to style dynamically. The issue is that the stylings need to overwrite the default v-dialog stylings. For some reason when using computed style bindings, variables in the CSS class, or even just directly inputting the styles, makes no impact to the style. How can I dynamically overwrite default styling on a Vuetify component?

Here is my dialog:

<template>
  <v-dialog 
    v-model="dialog" 
    max-width="350px"
    persistent
    hide-overlay
    style="{position: absolute; bottom: 0px;}"
  >        
  <div class="arrow-up mb-n1 ml-1"></div>
  <v-card>
    <v-container>
    <v-card-text>
    <v-row>
      <v-col 
        cols="12"
        align="start"
      >
        <p class="text-subtitle-1">
        Always best to start at the beginning, let's pull your products first.</p>
      </v-col>
    </v-row>
    </v-card-text>
      
      <v-card-actions class="mt-n8">
        <v-btn
          color="#68007d"
          text
          @click="goToImportMethod"
        >
          NEXT
        </v-btn>
        <v-btn
          color="#616161"
          text
          @click="closeEverything"
        >
          CLOSE
        </v-btn>
      </v-card-actions>
    </v-container>
  </v-card>
  </v-dialog>
</template>

and I've tried using a computed property like this:

  <v-dialog 
    v-model="dialog" 
    max-width="350px"
    persistent
    hide-overlay
    :style="myStyle"
  >

With this:

computed: {
  myStyle() {
    return {
      bottom: '0px',
      left: '150px',
      position: 'absolute'
    }
  }
},

I then tried adding in variables inside the class itself like this:

>>> .v-dialog {
  box-shadow: none;
  overflow: visible;
  bottom: var(--bottom);
  left: 150px;
  position: absolute;
}

with a simple data property like this:

data () {
  return {
    dialog: true,
    bottom: '0px',
  }
},

But in the end the only thing that works is statically overwriting the class which does me no good:

>>> .v-dialog {
  box-shadow: none;
  overflow: visible;
  bottom: 0px;
  left: 150px;
  position: absolute;
}

The v-dialog creates an overlay which contains the actual dialog. If you want to pass props like :style to the container, you can use the :content-props property:

<v-dialog
  :content-props="{style: myStyle}
  ...

If you just want to send CSS classes to the container, you can use the :content-class property.

Have a look at the snippet:

<!-- begin snippet: js hide: true console: false babel: false -->

<!-- language: lang-js -->

const { createApp, ref } = Vue;
const { createVuetify } = Vuetify
const vuetify = createVuetify()
const app = {
  setup(){
    const styles = {
      bottom: '0px',
      left: '0px',
      position: 'absolute',
    }
    
    return {
      dialog: ref(true),
      styles
    }
  }

}
createApp(app).use(vuetify).mount('#app')

<!-- language: lang-html -->

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vuetify@3/dist/vuetify.min.css" />
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">
<div id="app">
  <v-app>
    <v-main>
      <v-dialog v-model="dialog" max-width="350px" persistent hide-overlay :content-props="{style: styles}">
        <div class="arrow-up mb-n1 ml-1"></div>
        <v-card>
          <v-container>
            <v-card-text>
              <v-row>
                <v-col cols="12" align="start">
                  <p class="text-subtitle-1">
                    Dialog at bottom 0 and left 0.</p>
                </v-col>
              </v-row>
            </v-card-text>

          </v-container>
        </v-card>
      </v-dialog>
    </v-main>
  </v-app>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@3/dist/vuetify.min.js"></script>

<!-- end snippet -->