点击以后路径变了，为啥btn的内容没变

Question

<template>
    <div class="titie-box">
        <div class="logobox">
            <img src="../../assets/logo.png" width="50" height="50" />
            <span>招聘网站</span>
        </div>
        <div class="btn-box">
            <button @click="toggles">{{ btn ? "招聘广场" : "发布招聘" }}</button>
        </div>
    </div>
</template>

<script lang="ts">
import router from "@/router";
import { ref, defineComponent } from "vue"
export default defineComponent({
    setup() {
        let btn = ref(true)
        function toggles() {
            btn = ref(!btn.value)
            if (btn.value) {
                router.push('/recruit')
            } else {
                router.push('/')
            }
        }
        return {
            toggles,
            btn
        }
    }
})
</script>

<style lang="less" scoped>
.titie-box {
    height: 50px;
    display: flex;
    justify-content: space-between;
    margin: 10px;
    border-bottom: 2px solid #ccc;
    padding-bottom: 20px;
    .logobox {
        height: 50px;
        display: flex;
        justify-content: flex-start;
        span {
            line-height: 50px;
            font-weight: 900;
            font-size: 40px;
        }
    }
    .btn-box {
        height: 50px;
        button {
            font-size: 20px;
            background: #fff;
            border: 1px solid currentColor;
            color: #41b883;
            border-radius: 6px;
            padding: 11px 20px;
            cursor: pointer;
        }
    }
}
</style>

Answer 1