Привязки стилей компонента Vue Class / условное отображение не реагируют на изменение значения поля

Question

Я использую компоненты на основе классов, используя Typescript, Vue и эту библиотеку: https://github.com/vuejs/vue-class-component

Однако я сталкиваюсь с проблемой использования привязок стилей и условного рендеринга с использованием v-if директива: они, кажется, не реагируют, когда переменная поля класса изменяется. Рассмотрим этот пример:

---

<template>
    <button :class="[showMonthlyView ? '' : 'button-active']" @click="showMonthlyView = true">Monthly weather</button>
    <monthly-weather v-if="showMonthlyView" />
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import monthlyWeather from './monthly-weather.vue';

@Component({
    components: {
        monthlyWeather
    }
})

export default class MyComponent extends Vue {
    showMonthlyView: boolean = false;

};

</script>

---

Когда кнопка нажата, значение showMonthlyView должен измениться на true и компонент monthly-weather покажи себя и свой класс button-active быть применены к кнопке. Однако изменяется только значение поля (я проверял это).

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