Заставьте два элемента иметь одинаковую ширину

Я пытаюсь заставить два b-buttons (компонент кнопки из Buefy) оставаться такими же большими, как и более широкий из них.

Я считаю, что мне нужно установить минимальную ширину одной кнопки на значение ширины другой. Таким образом, если одна кнопка становится больше, другая тоже должна расти.

Как я могу это сделать?

Моим первым шагом было установить привязку к стилю 'min-width' для каждой кнопки, например так:

<b-button ref="firstButton" type="is-primary" size="is-large"
      :style="{ 'min-width': $refs.secondButton !== undefined ? $refs.secondButton.$el.clientWidth + 'px' : 0 }">
    First Button
</b-button> 

<b-button ref="secondButton" type="is-primary" size="is-large"
      :style="{ 'min-width': $refs.firstButton !== undefined ? $refs.firstButton.$el.clientWidth + 'px' : 0 }">
    Second Button
</b-button> 

Но это почти не работает, похоже, что это работает один раз при рендеринге страницы, и любое изменение размера (например, из-за локализации) игнорируется. Похоже, в этом $ref нет реактивности.

Мой второй дубль включал вычисляемое свойство, идея та же, что и в предыдущем дубле, но вместо того, чтобы устанавливать встроенный стиль, я задавал вычисляемое свойство.

Но на этот раз элементы $ref не определены, похоже, что вычисление происходит до их установки.

Как я могу сделать две кнопки одинаковой ширины, не устанавливая фиксированное значение и имея возможность изменять размер по мере увеличения/уменьшения размера кнопок?

Вот весь код:

(это просто две кнопки, окруженные разделом героя)

<template>
    <div>
        <section class="hero is-primary is-bold is-relative">
            <div class="hero-body">
                <div class="section">
                    <div class="container">
                        <!-- $refs.secondButton !== undefined ? $refs.secondButton.$el.clientWidth + 'px' : 0 -->
                        <!-- $refs.firstButton !== undefined ? $refs.firstButton.$el.clientWidth + 'px' : 0 -->

                        <div class="columns is-centered is-multiline is-mobile">
                            <div class="column is-narrow has-text-centered">
                                <b-button ref="firstButton" type="is-primary" size="is-large"
                                    :style="{ 'min-width': $refs.secondButton !== undefined ? $refs.secondButton.$el.clientWidth + 'px' : 0 }">
                                    First Button
                                </b-button>
                            </div>

                            <div class="column is-narrow has-text-centered">
                                <b-button ref="secondButton" type="is-primary" size="is-large"
                                    :style="{ 'min-width': $refs.firstButton !== undefined ? $refs.firstButton.$el.clientWidth + 'px' : 0 }">
                                    Second Button
                                </b-button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
</template>

<script>
    export default {

    }
</script>

<style lang="scss" scoped>
    //All from Buefy and Bulma.
</style>