Write a countdown with vue, the function is realized, but the rendering is not successful?

<div class="verification-code-wrapper">
    <input type="text" placeholder="" ref="phone_login_verification_code">
    <a class="get-code"
       @click="get_verification_code(phone_login, type=3)"></a>

    <div class="count-down" v-show="does_count_down_show">
        {{time_60}}{{count_down}}
    </div>
</div>

computed: {
    count_down: function () {
//                cookie  
        let cookie_arr = document.cookie.split(";");

        let expires;

        for (let i = 0; i < cookie_arr.length; iPP) {
            let cookieArrTrim = cookie_arr[i].trim();

            if (cookieArrTrim.indexOf("count_down") === 0) {
                expires = cookieArrTrim.substring("count_down".length + 1, cookieArrTrim.length);
            }
        }

        if (!expires) {
            return null;
        }


        window.setInterval(() => {
            this.time_60 -= 1;
        }, 1000);

    },

    does_count_down_show: function () {
        let cookie_arr = document.cookie.split(";");

        let expires;

        for (let i = 0; i < cookie_arr.length; iPP) {
            let cookieArrTrim = cookie_arr[i].trim();

            if (cookieArrTrim.indexOf("count_down") === 0) {
                expires = expires = cookieArrTrim.substring("count_down".length + 1, cookieArrTrim.length);
            }
        }

        if (this.time_60 > 0 && expires) {
            return true;
        }
        else {
            return false;
        }
    }

},

in the click event, after the CAPTCHA is retrieved from the background, it will be stored as a cookie at the current time + 60s.

the problem now is: the general CAPTCHA retransmission countdown is to change the text immediately after clicking "send" and start the countdown.
there is no change after I click to send. I have to refresh it again before I start the countdown.

what should I do to start rendering immediately?
maybe you need to write a flag, in the click event to bind to the send button, watch it?

The

code is repetitive, because it was originally a method, so I split the experiment. Excuse me.

I have already solved this problem, there are too many conditions which unnecessary,I make it brief.

Vue.js

Mar.04,2021

computed method is executed once when the page is initialized. The first time it should be executed when the setinterval, is dropped by return, and then when the attribute in the data used in the function changes. The event you click does not change the value of time_60, so the count_down is not executed. After refreshing, it should be a value in cook, and setinterval; will be run only if it is not run by return. Floor 1 is right. This kind of logic is not suitable to be written in the calculation attribute. It should be defined in methods, and it is more appropriate to run it in the callback of the drop interface. there is another problem. There is no valid value for return in count_down. If you look at your logic, it should only show undefined and null. .