The old and new values of the VUE snooping array remain unchanged. May I ask the seniors why?

recently in the self-study vue, I still have some questions about watch monitoring. I would like to ask my seniors to help me solve it.

specific problems are as follows:
the test monitors the new and old values of different types of data data. In the case of an array, watch detects changes in the array but does not detect the old values before the change.
I also checked the documents on the official website, and the problem should be here below, but I can"t understand the solutions given by the official website documents. Please give me some advice!

                g: {
                    handler: function (val, oldVal) {
                        console.log("newG:" + val, "oldG:" + oldVal);
                    }
                }

when you set an item directly using the index, for example: vm.items [indexOfItem] = newValue
when you modify the length of the array, for example: vm.items.length = newLength

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>watch</title>
    <script src="https://cdn.jsdelivr.net/npm/vue "></script>
</head>

<body>
    <fieldset>
        <legend>1</legend>
        <div id="app">
            <span>A:</span>
            <input type="text" v-model:value="a" />
            <span>B:</span>
            <input type="text" v-model:value="b" />
            <div>
                <span>Cname:</span>
                <input type="text" v-model:value="c.name">
            </div>
            <div>
                <span>Dname:</span>
                <input type="text" v-model:value="d.e.f.age">
            </div>
            <div>
                <span>arry:</span>
                <input type="text" v-model:value="g[0]">
            </div>
        </div>
    </fieldset>
    <script> 
        new Vue({
            el: "-sharpapp",
            data: {
                a: "",
                b: "",
                c: {
                    name: ""
                },
                d: {
                    e: {
                        f: {
                            nage: ""
                        }
                    }
                },
                g: []
            },
            watch: {
                //watch
                a: function (val, oldVal) {
                    console.log("newA:" + val, "oldA:" + oldVal);
                },
                //methods
                b: "anothermethod",
                //
                c: {
                    handler: function (val, oldVal) {
                        console.log("newname:" + val, "oldname:" + oldVal);
                    },
                    deep: true,
                    immediate: true
                },
                "c.name": {
                    handler: function (val, oldVal) {
                        console.log("newC:" + val, "oldC:" + oldVal);
                    }
                },
                "d.e.f.age": {
                    handler: function (val, oldVal) {
                        console.log("newD:" + val, "oldD:" + oldVal);
                    }
                },
                g: {
                    handler: function (val, oldVal) {
                        console.log("newG:" + val, "oldG:" + oldVal);
                    }
                }
            },
            methods: {
                anothermethod: function (val, oldVal) {
                    console.log("newB:" + val, "oldB:" + oldVal);
                }
            }
        })


    </script>
</body>

</html>