Global variable not updating [JavaScript]

I’m working on a webapp that draws a map of the United States and colors it based on financial data and a range of years selected by a slider. Technically, three maps are drawn and there are three buttons that switches which one of the three is shown. Clicking on a button should also change the value of a global variable so that the function that updates the colors on the map knows which map to change. However, the variable doesn’t seem to be changing. It changes inside the function that changes the map, but not anywhere else. Here is a stripped down version of the code that sets up the buttons and functions to change the value of activeMap. I’ve included a function that prints out the value of active map every second. It always prints out null.

<template>
    <div>
        <v-row class="pa-5">
            <v-col cols="12">
                <v-card outlined class="menu">
                    <div class="pa-3" style="text-align: center">
                        <v-btn
                            block
                            fab
                            large
                            outlined
                            tile
                            x-small
                            @click="toggleMap('incomes')"
                        >
                            <span class="buttonText">Incomes</span></v-btn
                        >

                        <v-btn
                            block
                            fab
                            large
                            outlined
                            tile
                            x-small
                            @click="toggleMap('home_values')"
                            ><span class="buttonText">House Prices</span></v-btn
                        >

                        <v-btn
                            block
                            fab
                            large
                            outlined
                            tile
                            x-small
                            @click="toggleMap('combined')"
                            ><span class="buttonText"> Market Health </span></v-btn
                        >
                    </div>
                </v-card>
            </v-col>
            <v-col style="text-align: center" id="d3-map" cols="0">
                <v-container class="container" id="map-container">
                    <v-col id="incomes" class="map"></v-col>
                    <v-col id="home_values" class="map"></v-col>
                    <v-col id="combined" class="map"></v-col>
                </v-container>
            </v-col>
        </v-row>
    </div>
</template>
<script>
import {
    defineComponent,
    onMounted,
} from "@nuxtjs/composition-api";

export default defineComponent({
    name: "Map",
    components: {},
    setup() {
        // Array contains html ID names corresponding to each div containing a map (SVG)
        const MAP_DIVS = document.getElementsByClassName("map");

        // Init vars to keep track of the actively displayed div (SVG) and corresponding map data
        var activeMap = null;

        onMounted(() => {
            checkMap();
        });

        // Define function to print activeMap every second
        function checkMap() {
            console.log(activeMap);
            setTimeout(checkMap, 1000);
        }

        // Define function to create toggle map btns
        function createToggleBtn(parentDiv, divControlled, btnText, toggleFunc) {
            var btn = document.createElement("button");
            btn.classList.add("toggle_btn");
            btn.innerText = btnText;
            btn.value = divControlled;
            btn.onclick = function () {
                toggleFunc(divControlled);
            };
            document.getElementById(parentDiv).appendChild(btn);
            return btn;
        }

        // Define toggle map functionality--used to change the 'active' map div/SVG that's displayed
        function toggleMap(divName) {
            if (divName == MAP_DIVS[0].id && activeMap != MAP_DIVS[0].id) {
                activeMap = MAP_DIVS[0].id;
            } else if (divName == MAP_DIVS[1].id && activeMap != MAP_DIVS[1].id) {
                activeMap = MAP_DIVS[1].id;
            } else if (divName == MAP_DIVS[2].id && activeMap != MAP_DIVS[2].id) {
                activeMap = MAP_DIVS[2].id;
            }
        }

        return {
            checkMap,
            toggleMap,
            createToggleBtn,
        };
    },
});
</script>