vue3.2 数据视图未同步更新

监听路由来判断是否在登录页面，在登陆页面，不展示导航组件，其他页面展示导航组件

<template>
  <div class="nav-btn">
    <NavBar v-show="isShowNav"></NavBar>
    <h2>{{isShowNav}}</h2>
    <router-view></router-view>
  </div>
</template>



<script setup>
import NavBar from './components/NavBar.vue'
import { useRouter, useRoute } from "vue-router"
import { ref, reactive, watch } from 'vue'
const route = useRoute()
let isShowNav = ref(false)
watch(route, (newValue,oldValue)=>{
  console.log(newValue.name);
  if(newValue.name == 'login'){
    isShowNav = false
  }else{
    isShowNav = true
  }
},{
  deep: true
})

</script>

运行结果及报错内容

我想要达到的结果

我在监听路由后对isShowNav 进行赋值，但视图中的isShowNav是没有变化的，请问为什么会这样，该怎么修改

isShowNav.value = true;

模板语法都没声明，vue周期函数都没定义

监听deep后增加immediate: true

ref.value