Метод Vue не обновляет значение переменной при вызове из другого файла .Vue

Question

В моем файле Header.Vue у меня есть индикатор выполнения и текст, который должен обновляться при каждом вызове метода.Когда я вызываю метод из этого файла .vue, он обновляется, и HTML изменяется, когда я вызываю метод из дочернего файла .vue обновляет переменную, но не изменяется в HTML.Не уверен, почему и как это исправить.

Ниже приведены Header.vue, Menu.vue и Basics.Vue В заголовке, когда я обновляю поле ввода, html изменяется с использованием метода теста.В Основах, когда я обновляю поле ввода, HTML-код не изменяется с помощью метода basicsProgressBar.Файл меню - это то, что связывает оба файла

Header.Vue

<template> 
    <div>
        <div class="row whiteArea">
            <div class="col-md-1"></div>
            <input type="text" class="form-control inputProfilePage" id="fname" name="fname"
                   placeholder="First Name" v-model="fname" @keyup="test"
            >
            <div class="col-md-11">
                <user-profile-menu v-bind:csrf=csrf v-bind:redirect=redirect></user-profile-menu>
            </div>
        </div>
    </div>
</template>

<script>

    export default {
        name: "Header",
        data() {
            return {
                fname: null,
            }
        },
        created() {

        },
        methods: {
            test: function(){
                this.barLength++;
            },

            basicsProgressBar: function () {
                this.barLength++;
            },
    }
</script>

Menu.vue

<template>
    <div class="row">
        <div class="col-md-10">
            <div v-if="basicsPage">
                <user-profile-basics v-bind:csrf=csrf></user-profile-basics>
            </div> 
        </div>
    </div>
</template>

<script>

    import Header from './Header.vue';

    export default {
        extends: Header,
        name: "Menu",
        data() {
            return {

            }
        },
        created() {

        },
        methods: {
     }
    }
</script>

Basics.vue

<template>
    <div class="row">
        <div id="basicGrid">

            <label id="nameLabel" for="name" class="control-label">Name: </label>
            <input type="text" class="form-control inputProfilePage" id="fname" name="fname"
                   placeholder="First Name" v-model="fname" @keyup="submitFirstName"
            >
            <i v-if="fnameEntered.value" id="fnameCheckPlacement"
               class="form-control-feedback glyphicon glyphicon-ok fnameCheck" style="margin-right: 10%;"></i>
      </div>   
    </div>
</template>

<script>

    import Menu from './Menu.vue';


    export default {
        extends: Menu,
        name: "Basics",
        data() {
            return {

                fnameEntered: {
                    value: false
                },

            }
        },
        created() {

        },
        methods: {
            submitFirstName: async function (event) {

                this.basicsProgressBar();
            },
        }

</script>