Comportamiento del texto en el v-btn de Vuetify

Tengo el siguiente conjunto de botones:

<template>
    <v-card color="secondary" elevation="6">
        <v-card-title>
            <v-spacer></v-spacer>
            Tres botones
        </v-card-title>
        <v-divider></v-divider>
        <v-card-text>
            <v-row>
                <v-col cols="12" sm="4" v-for="button in buttons" :key="button.id">
                    <v-btn color="primary" x-large="" block="">
                        <span style="word-break: normal !important;">{{button.text}}</span>
                    </v-btn>
                </v-col>
            </v-row>
        </v-card-text>
    </v-card>
</template>
<script>
export default {
    data () {
        return {
            //Este código no es de producción. Los textos de los botones se obtienen a través de una API y su longitud es variable
            buttons: [
                {id:1, text: "Soy un botón"},
                {id:2, text: "Soy otro botón. Bla, bla, bla, bla"},
                {id:3, text: "También soy un botón"}
            ]
        }
    },
}
</script>

En este ejemplo, los textos están codificados pero realmente los obtengo de una API. Su longitud es variable y no puedo saberla de antemano. Necesito:
1. Que el texto nunca supere el espacio del botón como está sucediendo en el botón 2.
2. Permitir que el texto del botón utilice las líneas que necesite. 1, 2, 10 … dependiendo de su longitud.
Siempre creciendo verticalmente y con un salto de línea como garantizaría la propiedad CSS word-break: normal;.
3. El ancho del botón permanece fijo ocupando todo el ancho de la columna, ya que la propiedad block debería lograrlo.

Todo esto debe cumplirse en las vistas de escritorio, tablet y móvil.

Puedes probarlo aquí.