Why does the created hook fire, but the value of the parameter in data doesn't change?

Question

Vue.js

Guys, hello.
There are two components, Container and child.

In a container, a child component is created via v-for

<graph-category v-for="(value, key, index) in kpi" :kpi="value" :title="key" :key="index"/>

I will give the child component in full

<template>
    <div>
        <div class="row mb-1">
            <span class="badge badge-secondary col">{{title}}</span>
            <button v-if="shown" @click="setHiddenState(false)"
                    class="col-auto btn btn-primary badge badge-primary ml-1">Свернуть
            </button>
            <button v-if="!shown" @click="setHiddenState(true)"
                    class="col-auto btn btn-primary badge badge-primary ml-1">Развернуть
            </button>
        </div>
        <div v-show="shown" class="row mb-4">
            <line-container v-for="(item, itemIndex) in kpi" :key="itemIndex" :list="cellsList"
                            :interval="daysInterval"
                            :title="item.title" :db-columns="item.column" :units="item.unit"/>
        </div>
    </div>
</template>

<script>
    import LineContainer from "./graphs/LineConteiner";

    export default {
        name: 'GraphCategory',
        components: {
            LineContainer
        },
        data() {
            return {
                shown: true
            }
        },
        props: {
            title: String,
            cellsList: Array,
            daysInterval: Number,
            kpi: Array
        },
        watch: {
            shown() {
                console.log("shown changed " + this.shown);
            }
        },
        mounted() {
            this.getHiddenState();
            console.log(this.title + " shown is " + this.shown);
        },
        methods: {
            setHiddenState(value) {
                console.log("setHiddenState " + value);
                this.$cookies.set(this.title, value, '7d', '/', '', false, '');
                this.shown = value;
            },
            getHiddenState() {
                if (this.$cookies.isKey(this.title)) {
                    let result = this.$cookies.get(this.title);
                    console.log("getHiddenState "+this.title+": " + result);
                    this.shown = result;
                }
            },
        }
    }
</script>
<style scoped>

</style>

The child component has a simple switcher in the form of two buttons that switch the Collapsed / Expanded states and remembers this in cookies.

Values ​​in cookies are written, read, when the Collapse button is pressed, the component collapses, when the Expand button is pressed, it expands, but when the page is updated, the mounted hook (just like created and beforeMount) works, the shown value from the cookie is read correctly, but v-if and v- show do not work, although judging by the diagram, reactivity should already work. What am I missing?

Answer 1

Save true/ falseand read 'true'/ 'false'. Strings are stored in cookies. And the boolean equivalent of any non-empty string is true. Therefore, the result of v-if/ v-showis the same, regardless of the value read.