Vue version

^3.2.33

Link to minimal reproduction

https://sfc.vuejs.org/#__DEV__eNqtlU9v0zAUwL/KU06dVCcDbZfQTSCuSEjAjXDIErfNmjiR7aStqkj80cRp4sgFDiBxRZ2mSZu2fgeHT8SLk7TpUOEQckhsv3+/9+z4LYwnSWJmKTVsYyA8HiQSBJVpAqHLRkeOIYVjHDssiJKYS1jA1JXeuA+cup4MMgo5DHkcgWOgD8d41NJMBX0Rp5L2QX/4s4BNttQJ1+vaymFezIQEvQRHa+PenhaGFLGkq0VN6N7CYVAZ2MDSMOw7LK/UNWSvFPf24Oi4UjKZG1HUwcXMDVOqJdoHgJgGaLEW1KsAnisowvquGJ/ELvcdw25EaFQCmQ3x640ANg6qRwYyREjHUD+KT2qllsUZFO/UUt2pC5y8dQzNtXlSHpbqVivwlkbemr3BlJsxx63jbL1Q4ws6iiiTneG/qSt1icxXalW838m8jtaBmNPyEHUG/o4lvlG3+F7txG1CdaCN5k9jzsqT3JH3i7rG03GtbkBdFB/+AR7NiVeH7cDuniDhqzF9SXkWePgLd0vh18+y4MVHTOJWXRbnxXmV0M4sdHwix5SIhqBLNr7/nPv/YSc+l/8ogi/LNNRyN77vk7iKuBP7L2G+Yn3usEpnnQLsrEtefvBV3ooDq7re8TLHiaRREmJZcAYw8IMMvNAVAi/8YUhnIOlMklkIKAh8SmbNYMTdOTnY39c9oYygTTMyjDmaBugVAtYuuGOAPaHzWrg2Q8NWU7BlXCuYmDaaNCzJjBwCERM6JTPy4GHLHGu6AG2hiwm5TlU7tjaeG0gLKatM69HAahXA6BtV0yKRm5inImbYDPWWIZQWYA+0m02sO125OWMpE2Fblhh6ZQs9FWbMRxaOTJ4yGUTUpCIiJzye4tlGx+st3G5/bVcpSyYj04uj0k2t8fjA3DcPrW1rvGZ5RjnhlOHhuO9mm+ie6h9U9SnJjfw3XDuHFw==

Steps to reproduce

What I am doing is breadcrumb and problem is reactive state won't update template.

first i define the route const route = useRoute();

Reactive state section

let state = reactive({
  route: null,
});

This section works well it changes state

watch(
  () => route.name,
  (value) => {
    switch (value) {
      case "dashboard":
        state.route = [
          {
            title: "Хянах самбар",
            url: "/dashboard",
          },
        ];
        return;
      case "segment":
        state.route = [
          {
            title: "Сегмент",
            url: "/segment",
          },
        ];
        return;
      case "report":
        state.route = [
          {
            title: "Тайлан",
            url: "/report",
          },
        ];
        return;
      case "myCorner":
        state.route = [
          {
            title: "Миний булан",
            url: "/my-corner",
          },
        ];
        return;
      case "aboutTheService":
        state.route = [
          {
            title: "Үйлчилгээний",
            url: "/about-the-service",
          },
        ];
        return;
      case "addOrder":
        state.route = [
          {
            title: "Захиалга",
            url: "/add-order",
          },
          {
            title: "Нэмэх",
            url: "/add-order",
          },
        ];
        return;
    }
  }
);

But this section render nothing

<template>
  <div class="flex text-xl divide-x divide-gray-400">
    <div v-for="item in state.route" :key="item">
      <RouterLink :to="item.url" class="px-5 -skew-x-12">
        {{ item.title }}
      </RouterLink>
    </div>
  </div>
</template>

What is expected?

I want template needs to update, and every time route has changed breadcrumb section tells which menu has been you in

What is actually happening?

state changed but template render nothing

System Info

System:
    OS: Windows 10 10.0.22000
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1165G7 @ 2.80GHz
    Memory: 6.07 GB / 15.73 GB
  Binaries:
    Node: 16.15.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.18 - C:\Program Files\nodejs\yarn.CMD
    npm: 8.12.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.22000.120.0), Chromium (102.0.1245.44)
    Internet Explorer: 11.0.22000.120

Any additional comments?

No response

Hi,

your example is not runnable. If you can't achieve a runnable example on the SFC Playground, use Stackblitz, codesandbox or provide a Github repository with the minimal runnable production.

Closing as stale (no valid reproduction)